BootStrap Validator Use notice (Must see article) _javascript Skills

If you use the front end frame is bootstrap, then the front end verification framework does not have to consider, Bootstrapvalidator is the best choice, it and bootstrap the combination of the most perfect, but to pay attention to the version of the problem, There are different versions for BOOTSTRAP2 and BOOTSTRAP3.

Here are two things I've come across, take notes myself:

1, add the name attribute for each form element that you want to validate

For example:

<div class= "Form-group" > 
<input type= "text" placeholder= "Please input SMS Authentication code" id= "Smscaptcha" name= "Smscaptcha" class= "Form-control" 
data-bv-notempty data-bv-notempty-message= "Authenticode cannot be empty" 
data-bv-regexp= "true" Data-bv-regexp-regexp= "[0-9]{6}" data-bv-regexp-message= authentication code format is incorrect "> 
</div> <div class=" Form-group "> 
<input type=" email "class=" Form-control "id=" ExampleInputEmail1 "placeholder=" Enter email 
" Data-bv-notempty data-bv-notempty-message= "Authenticode cannot be empty" > 
</div>

In the example above, the first FORM element adds the Name property, the second form element has no Name property, and both form elements use Non-null validation, and the final effect is as follows:

As you can see from the results, if you want to validate a form item, the table item must have a Name property. Otherwise, validation will not work.

2, in order to maintain a good effect, the form elements best placed in the div.form-group inside

For example, the following example:

<label for= "ExampleInputEmail1" > Username </label> 
<div class= "Input-group" > 
<input type= " Text "class=" Form-control required "placeholder= username" id= "username" name= "username" Data-bv-notempty Data-bv-notempty-message= "Please enter user name"/> <span class= "Input-group-addon" > 
<span class= "Glyphicon" Glyphicon-user ">
</span> 
</span> 
</div>

The User name input box and its label are placed directly below the form element, and the resulting effect is as follows:

When the input error message location below the entire form form, the style has changed greatly, although it can achieve the effect of validation, but the style is not acceptable, the solution is to have to verify the form elements under Div.form-group:

<div class= "Form-group" > 
<label for= "ExampleInputEmail1" > Username </label> 
<div class= " Input-group "> 
<input type=" text "class=" Form-control required "placeholder=" username "id=" username "name=" Username "Data-bv-notempty data-bv-notempty-message=" Please enter user name "/> <span class=" Input-group-addon "> 
< Span class= "Glyphicon glyphicon-user" >
</span> 
</span> 
</div> 
</div>

3, to prevent the form of repeated submissions

Before the introduction of Bootstrapvalidator, he wrote a paragraph of JS code to prevent form submission, when the user clicks the Submit button, the Submit button is dimmed, the code is as follows:

var form = $ (' form '); 
var formtype = form.attr (' class '); 
if (FormType!= null) { 
//Use Get and post to identify form types 
//get forms used to identify search types 
//post used to identify add, update types of form 
var get = Formtype.indexof (' get '); 
var post = Formtype.indexof (' post '); 
Form.submit (function () { 
if (get!=-1) {return 
; 
} 
if (post!=-1) { 
if (!submited) { 
submited = true; 
$ ("Button[type=submit]"). Prop (' disabled ', true); 
} else{return 
false;}} 
); 

However, after the introduction of Bootstrapvalidator and this code conflict, the specific performance, if the validation error, for example, an input must not fill out when the form is submitted, at this time Bootstrapvalidator will prompt you this input is required, At this point the Submit button is disable state, until you fill in the data, the button is normal to submit the state, the problem is here, even if you fill in the normal data, the button is the normal state, but the form can not be submitted. More than half a day to troubleshoot, the problem lies in the upper section of JS code.

In fact, Bootstrapvalidator has been the design of repeated submissions, if a form needs to undergo bootstrapvalidator verification, click the Submit button, the Submit button will be dimmed until the server returns the response. Then, if a form does not need validation, such as a search form, you can give the form a class, such as Validation-form, in the JS main function called $ ("Form.validation-form"). Bootstrapvalidator (), the validator can be empty.

Recommended reading:

Form validation plug-in in bootstrap Bootstrapvalidator use method collation (recommended)

The above is a small set to introduce the bootstrap validator use of attention (must read), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!