jQuery form validation not working with bootstrap

Question

Before using bootstrap, my jQuery form validation worked. Now it's not working. Help with this problem much appreciated. Thanks!

Here's some of my code...

My form and script call:

<div class="form1">
            <!-- registration form, which is validated by script bellow -->
            <form class="form-horizontal" role="form" id='registerform'>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="email">Email:</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="email"
                            placeholder="Enter email">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="pwd">Password:</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="pwd"
                            placeholder="Enter password">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="pwd">Confirm
                        Password:</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="pwdcnf"
                            placeholder="Enter password">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default">Submit</button>
                    </div>
                </div>
            </form>
            <!-- form validation script -->
            <script type="text/javascript" src="js/formValidation.js"></script>

My jQuery:

    $('#registerform').validate({
    rules:{
        errorClass: "error",
        'email':{
            required: true,
            email: true
        },
        'pwd':{
            required: true,
            minlength: 5
        },
        'pwdcnf':{
            required: true,
            minlength: 5,
            equalTo: "#password"
        }
    },
    messages:{
        'pwd':{
            required:"This field is required",
            minlength:"Your password must be at least 5 character long"
        },
        'pwdcnf':{
            required:"This field is required",
            minlength:"Your password must be at least 5 character long",
            equalTo:"Your password does not match"
        }
    }
});

on top:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import of bootstrap css and js code -->
<link rel="stylesheet" type="text/css" href="css/background.css"> <!-- my css -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!--these two scripts allow the use of the jQuery form validation plug in.-->
<!--the form validation script is lower down bellow the registration form -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
</head>

I'm guessing that the bootstrap javascript file is conflicting some how with jQuery and my validation?

You've incorrectly put errorClass inside of the rules object. The errorClass option is a sibling of rules, not a child. — Sparky
– Sparky, Commented Jul 24, 2015 at 2:19
That tells me you've simply broken the plugin... if you can submit without errors, then validation plugin is not working at all. You are getting an email error thanks to HTML5 validation already built into the browser because the email field is type="email". Put debug: true as another .validate() option and look at your console. — Sparky
– Sparky, Commented Jul 24, 2015 at 2:49
"has no name assigned" ~ That error is telling you exactly what I posted in my answer below. — Sparky
– Sparky, Commented Jul 24, 2015 at 3:01

Alan · Accepted Answer · 2015-07-24 00:01:20Z

I think Bootstrap js may need jQuery as a dependency.

Try changing the order of your js file loading from so Bootstrap comes after jQuery.

<!--LOAD JQUERY-->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<!--LOAD THIS FILE AFTER JQUERY-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

On the Bootstrap website it says:

Plugin dependencies Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files). Consult our bower.json to see which versions of jQuery are supported.

Sparky · Accepted Answer · 2015-07-24 03:02:15Z

1

You are getting an email error thanks to HTML5 validation already built into the browser thanks to type="email" on the email field.

The plugin is not working because none of your fields contain a name attribute. A unique name attribute on each input is mandatory for this plugin to work. It's how it keeps track of everything.

Also within your rules object, those names are supposed to correspond to each name attribute, not each id.

$('#registerform').validate({
    errorClass: "error",
    rules:{      
        'email': {   // <- this is the NAME attribute
            required: true,
            email: true
        },
        'pwd': {     // <- this is the NAME attribute
            required: true,
            minlength: 5
        },
        'pwdcnf': {  // <- this is the NAME attribute
            required: true,
            minlength: 5,
            equalTo: "#password"
        }
    }, ....

HTML:

<input name="email" type="email" class="form-control" id="email" placeholder="Enter email">

<input name="pwd" type="password" class="form-control" id="pwd" placeholder="Enter password">

<input name="pwdcnf" type="password" class="form-control" id="pwdcnf" placeholder="Enter password">

edited Jul 24, 2015 at 3:02

answered Jul 24, 2015 at 2:56

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

1 Comment

Dylan Over a year ago

Oh, wow! Thanks a lot, Sparky! I did not see this comment of yours. This finally works! That took longer than I expected. At least now I know. Thumbs up for you!

Collectives™ on Stack Overflow

jQuery form validation not working with bootstrap

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related