BootstrapValidation对我不起作用请看这个代码

Question

I'm trying to add bootstrapvalidation to my website signup form but I'm not getting it to work need help please. Here is the form code:

If any one can help me fix this I will be really greatful, Thanks.

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form id="tineyForym2" name="form1" method="post" action="#" enctype="multipart/form-data"> <input type="hidden" value="" name="user_id"> <input type='hidden' name='action' value='edit' > <table border="0" cellSpacing="1" cellPadding="3" class="table" id='dynamic_form'> <tr> <td class="dynamic_form_field"> <cite>*</cite>First Name </td> <td class="dynamic_form_value"> <input name="FirstName" class="form-control" value="" type="text" id="firstname" data-toggle="tooltip" data-placement="bottom" title="Enter your First name!"> </td> </tr> <tr> <td class="dynamic_form_field"> <cite>*</cite>Last Name </td> <td class="dynamic_form_value"> <input name="LastName" class="form-control" value="" type="text" data-toggle="tooltip" data-placement="bottom" title="Enter your last name!"> </td> </tr> <tr> <td class="dynamic_form_field" height="20">&nbsp; </td> <td class="dynamic_form_value" height="20">&nbsp;</td> </tr> <tr> <td class="dynamic_form_field"> <cite>*</cite>Username </td> <td class="dynamic_form_value"> <input name="Username" class="form-control" value="" type="text" data-toggle="tooltip" data-placement="bottom" title="Username will be used for login purpose!"> <br>(Choose Your username. Use letters, or numbers, but don't use spaces.) </td> </tr> <tr> <td class="dynamic_form_field"> <cite>*</cite>Password </td> <td class="dynamic_form_value"> <input class="form-control" name="Password" value="" type="password" id="password" data-toggle="tooltip" data-placement="bottom" title="Enter Login Password!"> </td> </tr> <tr> <td class="dynamic_form_field"> <cite>*</cite>Confirm Password </td> <td class="dynamic_form_value"> <input class="form-control" name="Password2" type="password" value="" id="password2" data-toggle="tooltip" data-placement="bottom" title="Enter Matching password"> </td> </tr> <tr> <td class="dynamic_form_field" height="20">&nbsp; </td> <td class="dynamic_form_value" height="20">&nbsp;</td> </tr> <tr> <td class="dynamic_form_field"> <cite>*</cite>Your E-mail </td> <td class="dynamic_form_value"> <input class="form-control" name="Email" type="email" id="email" value="" id="email" data-toggle="tooltip" data-placement="bottom" title="Your Email Address"> </td> </tr> <tr> <td class="dynamic_form_field">Receive Newsletter </td> <td class="dynamic_form_value"> <label class="radio-inline"> <input name="Newsletter" type="radio" value="1" >Yes </label> <label class="radio-inline"> <input name="Newsletter" type="radio" value="0" >No </label> </td> </tr> <tr> <td class="dynamic_form_field">Auto Notification on new Jobs </td> <td class="dynamic_form_value"> <label class="radio-inline"> <input name="Notification1" type="radio" value="1" >Yes </label> <label class="radio-inline"> <input name="Notification1" type="radio" value="0" >No </label> </td> </tr> </table> <hr class="colorgraph"> </div> </div> <div class="row"> <div class="col-xs-12 col-md-3"> <input class="btn btn-primary btn-lg" type="submit" name="dede" value="Submit"> </div> <div class="col-xs-12 col-md-6"> By clicking <strong class="label label-primary">Submit</strong>, you agree to the <a href="#" data-toggle="modal" data-target="#t_and_c_m">Terms and Conditions</a> set out by this site, including our Cookie Use. </div> </div> </form> 

And here is the jsfiddle link: http://jsfiddle.net/eo5t48rw/5/

Answer 1

1. You should to use equal names for control names and for validator names.Ex.

   fields: { firstName: { ...}, LastName { ...}, USERNAME {...} }

and controls should be named as name="firstName", name="LastName", name="USERNAME". Names are case sensitive!

2. for right using bootstrap validators you should use bootstrap document structure, like:

    <form id="tineyForym2" name="tineyForym2" method="post" class="form-vertical"> <div class="form-group"> <label class="control-label"> First Name </label> <div class="controls"> <input name="firstName" class="form-control" value="" type="text" title="Enter your First name!" /> </div> </div> <div class="form-group"> <label class="control-label"> Last Name </label> <div class="controls"> <input name="lastName" class="form-control" value="" type="text" title="Enter your Last name!" /> </div> </div> 

   ...

3. I had js error "too much recursion" in your code . in line

   name="Email" type="email" id="email"

Rename this input control . it should not equal a type name (type="email")

4. in you example you init bootstrapValidator on nonexistent form element

   $('#tryitForm').bootstrapValidator

should be

$('#tineyForym2').bootstrapValidator