jqBootstrapValidation plugin is not working for my form

Question

This is my first time using this plugin. I am using jQuery v-1.10. I am also using the migrate plugin. I have added the js file. I have added all of these using prepros. But still the plugin is not working.

No error is also showing in the console; only a warning is showing saying:

event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

My form and the JS code is given below.

<form id="login-form" method="post" action="#" novalidate>
    <label for="login-email" class="control-label">Email : </label>
    <input id="login-email" class="form-control" name="email" type="email" placeholder="Email..." required><br>
    <label for="login-password" class="control-label">Password : </label>
    <input id="login-password" class="form-control" name="password" type="password" placeholder="Password..." required><br>
    <input class="btn btn-default" name="submit" type="submit" value="Submit">
</form>

$("#login-form input").not("[type=submit]").jqBootstrapValidation();

Answer 1

You must use proper controls in your markup for this to work.

Ex.

<form ...>
    <div class="control-group">
        <label ...>Email</label>
        <div class="controls">
            <input ... />
            <p class="help-block"></p>
        </div>
    </div>
</form>

And personally I believe the better way of handling the javascript is to create a "validated" class because not all fields will require validation. But I suppose this really depends on your form elements: you may indeed require the entire form to be validated but in most of the forms I've worked with, only certain elements require validation and therefor creating a class to call in your javascript is better so that jqBootstrapValidation.js isn't scanning the entire form.

Ex.

/* assigned by class */
$(function(){$(".validated").jqBootstrapValidation();});

/* assigned by element */
$(function(){$("input,select,textarea").not("[type=submit]").jqBootstrapValidation();});

Then simply add your "validated" class to anything you need validated:

<input type="email" class="form-control validated" name="email" id="email" placeholder="Email Address" required />

Hope this helps!