CODEWITHSUNDEEP
jqueryvalidationtwitter-bootstraptwitter-bootstrap-3
xrcwrn
xrcwrn

Reputation: 5327

Bootstrap validation not working

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.

Upvotes: 5

Views: 40125

Answers (3)

Hari Prasath S
Hari Prasath S

Reputation: 79

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

<body> 

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

</body>

Upvotes: 0

dmullings
dmullings

Reputation: 7200

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);
        }
    });
});

Upvotes: 5

gronostaj
gronostaj

Reputation: 2282

  1. You don't have jQuery included. Bootstrap plugins require jQuery.

  2. You have jqBootstrapValidation included twice: first the human-readable version, then the minified one. Include only the minified version.

  3. 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.

Upvotes: 2

Related Questions