Bootstrap validation not working

Question

I am trying to use validation using bootstrap. I tried solution as here but its not working.

<form id="tryitForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-md-3 control-label">Full name</label>
        <div class="col-md-4">
            <input type="text" class="form-control" name="firstName" />
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control" name="lastName" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-md-3 control-label">Email address</label>
        <div class="col-md-6">
            <input type="text" class="form-control" name="email" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-md-3 control-label">Gender</label>
        <div class="col-md-6">
            <div class="radio">
                <label><input type="radio" name="gender" value="male" /> Male</label>
            </div>
            <div class="radio">
                <label><input type="radio" name="gender" value="female" /> Female</label>
            </div>
            <div class="radio">
                <label><input type="radio" name="gender" value="other" /> Other</label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-3 col-md-8">
            <button type="submit" class="btn btn-primary">Say hello</button>
        </div>
    </div>
</form>

I have added proper js files please see fiddle link. Kindly help to know what is the problem.

where is the `bootstrap plugin file`, `jquery`.. cannot see in your fiddle and also not in your post? — Shail Paras, Jul 02 '14 at 11:19
in addition to what others have already said, the plugin jqBootstrapValidation.min.js that you included in your fiddle is not the same plugin that you linked the documentation for. bootstrapValidator.min.js != jqBootstrapValidation.min.js They are completely different plugins — dmullings, Jul 02 '14 at 11:39

dmullings · Accepted Answer · 2014-07-03T11:14:53.573

This is a working jsfiddle: http://jsfiddle.net/P28nR/1/

The things that were missing or incorrect were:

You didn't include jquery
You included the wrong jquery bootstrap plugin. The correct files can be found at the links below:

//cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css //cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js

You didn't add the javascript to configure and run the validator plugin

$(document).ready(function() {
    $('#tryitForm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            firstName: {
                validators: {
                    notEmpty: {
                        message: 'The first name is required and cannot be empty'
                    }
                }
            },
            lastName: {
                validators: {
                    notEmpty: {
                        message: 'The last name is required and cannot be empty'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'The email address is required'
                    },
                    emailAddress: {
                        message: 'The input is not a valid email address'
                    }
                }
            },
            gender: {
                validators: {
                    notEmpty: {
                        message: 'The gender is required'
                    }
                }
            }
        },
        submitHandler: function(validator, form, submitButton) {
            var fullName = [validator.getFieldElements('firstName').val(),
                            validator.getFieldElements('lastName').val()].join(' ');
            alert('Hello ' + fullName);
        }
    });
});

Your fiddle is working properly, But not displaying images like given in `http://bootstrapvalidator.com/` could you please tell me how to include image also — xrcwrn, Jul 03 '14 at 08:16
@xrcwrn I created an updated fiddle http://jsfiddle.net/P28nR/1/ that sets the icons by setting the `feedbackIcons` property of the configuration object of the plugin. — dmullings, Jul 03 '14 at 11:17
@xrcwrn I believe this question was already answered. It is best to create another question with all the relevant details so myself and others can provide possible answers to the new question. — dmullings, Jul 27 '14 at 11:50
@dmullings, I use your code. Everything works fine. Can you tell me how I can submit form after all validation passes? In your code after filling all required fields properly, submit button becomes disabled and form is not submitted. — Someone, Feb 23 '17 at 15:57
@Someone - I just checked out the latest fiddle. http://jsfiddle.net/P28nR/1/ it still looks good to me. The submit button is active after all fields are filled in. Pressing the submit button currently shows an alert, but you can modify the `submitHandler` to do anything you want. — dmullings, Feb 23 '17 at 16:06

score 2 · Answer 2 · answered Jul 02 '14 at 11:20

You don't have jQuery included. Bootstrap plugins require jQuery.
You have jqBootstrapValidation included twice: first the human-readable version, then the minified one. Include only the minified version.
Order is important when loading external JS libraries. Load jQuery first, then Bootstrap scripts, then any additional plugins. JS is executed from top to bottom, so dependencies have to be loaded before scripts.

score 0 · Answer 3 · edited Feb 03 '21 at 18:59

0

make try by puting (scrpit form-validation.js) file at last of body tag

<body> 

      <script src="form-validation.js"></script>

</body>

edited Feb 03 '21 at 18:59

EsmaeelE

2,331
6
22
31

answered Feb 03 '21 at 11:55

Hari Prasath S

79
3

Bootstrap validation not working

3 Answers3

Linked