How to validate bootstrap form using jQuery

We always need to add validation on form like registration form, contact form, login form etc. we always prefer to give validation error after page refresh but you can give validation without page refresh. If you use bootstrap then you can use easily bootstrapValidator.js plugin.

bootstrapValidator.js plugin gives client side validation without page refresh. We can use simply. validator.js plugin we can add validation in our PHP project, or any framework like laravel framework, codeigniter framework, symphony framework etc. You may also like How to Remote call using bootstrap validator and How to validate files using bootstrap validator.

bootstrapValidator.js Plugin

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>

HTML Code

<form role="form" method="post" id="registervalidation" enctype="multipart/form-data">
    
    <div class="form-group">
        <label>First name <span class="required"> * </span></label>
        <input type="text" class="form-control" placeholder="Type your first name" name="first_name" tabindex="2" value="">
    </div>

    <div class="form-group">
        <label>Password <span class="required"> * </span></label>
        <input type="password" class="form-control" placeholder="Type your password" tabindex="14" name="password1" value="">
    </div>
      
    <div class="form-group">
        <label>Re Type Password <span class="required"> * </span></label>
        <input type="password" class="form-control" placeholder="Type your password" tabindex="15" name="password2" value="">
    </div>
    
    <div class="form-group">
        <label>Passport <span class="required"> * </span></label><br />
        <input type="file" name="passport" tabindex="15">
    </div>
    
    <div class="form-group">
        <button class="btn btn-primary" type="submit">Submit</button>
    </div>
</form>

jQuery Code

<script type="text/javascript">
    $(function () {
        $('#registervalidation').bootstrapValidator({
            message: 'This value is not valid',
            fields: {
                first_name: {
                    validators: {
                        notEmpty: {
                            message: 'Please Enter First Name'
                        }
                    }
                },
                password1: {
                    validators: {
                        notEmpty: {
                            message: 'Please enter your password.'
                        },
                        stringLength: {
                            min: 8,
                            max: 50,
                            message: 'The New Password field must be at least 8 characters in length.'
                        }
                    }
                },
                password2: {
                    validators: {
                        notEmpty: {
                            message: 'Please enter your password.'
                        },
                        identical: {
                            field: 'password1',
                            message: 'The password and its confirm are not the same'
                        }
                    }
                },
                passport: {
                    validators: {
                        file: {
                            extension: 'jpg,pdf',
                            maxSize: 5 * 1024 * 1024, // 5 MB
                            message: 'Please upload a .pdf or .jpg file - max. size 5MB'
                        },
                        notEmpty: {
                            message: 'Please select Passport File'
                        }
                    }
                },
            }
        });

    });
</script>