Form Validation using jQuery and Bootstrap Validator

In this article, I will show you a simple way to validate a form. For this purpose, we will use a plugin called Bootstrap Validator.

To see it in action, we can build a form validation by checking that a typical contact form has a name, a valid e-mail address, image validation and a body text set.

HTML Form

<form action="submit.php" id="defaultForm" enctype="multipart/form-data" method="POST" >
    <div class="form-group">
        <label class="control-label">
            First name <span class="symbol required"></span>
        </label>
        <input type="text" name="customer_fname" class="form-control" id="customer_fname">
    </div>

    <div class="form-group">
        <label class="control-label">
            Last name <span class="symbol required"></span>
        </label>
        <input type="text" name="customer_lname" class="form-control" id="customer_lname">
    </div>

    <div class="form-group">
        <label class="control-label">
            Mobile number <span class="symbol required"></span>
        </label>
        <input type="text" class="form-control" id="customer_mobile" name="customer_mobile">
    </div> 

   
    <div class="form-group">
        <label class="control-label">
            Email <span class="symbol required"></span>
        </label>
        <input type="email" class="form-control" id="customer_email" name="customer_email">
    </div>

    <div class="form-group">
        <label class="control-label">
            Profile image<span class="symbol required"></span>
        </label>
        <input type="file" name="customer_profile_image">
    </div>
    
    <div class="row col-sm-offset-3">
        <div class="col-sm-4 ">
            <button class="btn btn-dark-blue btn-block " name="submitButton" type="submit">
                <i class="fa fa-save"></i> Save 
            </button>
        </div>
        
        <div class="col-sm-4">
            <button class="btn btn-dark-gray btn-block" id="resetBtn" type="reset">
                <i class="fa fa-refresh"></i> Reset 
            </button>
        </div>
    </div>
</form>

jQuery and Bootstrap

<script type="text/javascript">
    $(document).ready(function() {

        $('#defaultForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                customer_fname: {
                    validators: {
                        notEmpty: {
                            message: 'The customer first Name is required and cannot be empty'
                        }
                    }
                },
                
                customer_lname: {
                    validators: {
                        notEmpty: {
                            message: 'The customer last Name is required and cannot be empty'
                        }
                    }
                },
                customer_email: {
                    validators: {
                        notEmpty: {
                            message: 'The customer email is required and cannot be empty'
                        },
                        remote: {
                            url: '{{url('admin/customer/checkemail')}}',
                            data: function(validator) {
                                return {
                                    email: validator.getFieldElements('customer_email').val()
                                };
                            },
                            message: 'The email address is not available'
                        },
                    }
                },
                customer_mobile: {
                    validators: {
                        notEmpty: {
                            message: 'The customer mobile number is required and cannot be empty'
                        },

                    }
                },
               
                customer_profile_image: {
                    validators: {
                        notEmpty: {
                            message: 'Please select jpeg,jpg or png for an image'
                        },
                        file: {
                            extension: 'jpeg,jpg,png',
                            type: 'image/jpeg,image/png',
                            message: 'The selected file is not valid'
                        }
                    }
                }
            }
        });

        $('#validateBtn').click(function() {
            $('#defaultForm').bootstrapValidator('validate');
        });

        $('#resetBtn').click(function() {
            $('#defaultForm').data('bootstrapValidator').resetForm(true);
        });

    });

</script>