How to create Form Control validation in PHP

In this Post we will learn to validate form controls using Jquery and PHP.

Sometime, during online form submission user must fulfil some condition to successfully submit form for example some fields must require (Eg. Username), minimum or maximum characters (Eg. Password),  some fields must be Email Id, some fields must be Numbers,  two fields Match (Eg. Confirmation emailed) , Callback, Regex  etc.  Bootstrap provides Bootstrap validation plugin for validation jqBootstrapValidation.

Here is simple Example illustrates how to use it in our existing form.

Index.php

<!—Import Rxternal Resources-- >

<script type=”text/javascript” src=” http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js “> </script>

<script type=”text/javascript” src=” setup.js “> </script>

<link href=”http://getbootstrap.com/dist/css/bootstrap.css”  type=”text/css”>

<!—Form -- >

<form>

    <div class="form-group">

        <label class="control-label" for="firstname">Name:</label>

        <div class="input-group">

            <span class="input-group-addon">$</span>

            <input class="form-control" placeholder="Enter UserName " name="firstname" type="text" />

        </div>

    </div>

    <div class="form-group">

        <label class="control-label" for="lastname">Email:</label>

        <div class="input-group">

            <span class="input-group-addon">€</span>

            <input class="form-control" placeholder="Enter Email Id" name="lastname" type="email" />

        </div>

    </div>

        <button type="submit" class="btn btn-primary"<Submit</button>

</form>

Here we have created simple form with fields Name and email with css classes.

For Validation we will use custom js code as below

Setup.js

    $('form').validate({

        rules: {

            firstname: {

                minlength: 3,

                maxlength: 15,

                required: true

            },

            lastname: {

                minlength: 3,

                maxlength: 15,

                required: true

            }

        },

        highlight: function(element) {

            $(element).closest('.form-group').addClass('has-error');

        },

        unhighlight: function(element) {

            $(element).closest('.form-group').removeClass('has-error');

        },

        errorElement: 'span',

        errorClass: 'help-block',

        errorPlacement: function(error, element) {

            if(element.parent('.input-group').length) {

                error.insertAfter(element.parent());

            } else {

                error.insertAfter(element);

            }

        }

    });

That’s it now form is ready with walidation. You can directly get support from Github click here provides code for each type of validation.

Download  Bootstrap Validation V1.3.6

To read more follow me on g+