Precautions for using BootStrap Validator (required), bootstrapvalidator

Precautions for using BootStrap Validator (required), bootstrapvalidator

If the front-end framework you use is bootstrap, you do not need to consider the front-end verification framework. bootstrapvalidator is the best choice. It works perfectly with bootstrap, but pay attention to the version, different versions are available for bootstrap2 and bootstrap3.

Below are two notes I have encountered:

1. Add the name attribute for each form element to be verified

For example:

<Div class = "form-group"> <input type = "text" placeholder = "Enter the SMS verification code" id = "smsCaptcha" name = "smsCaptcha" class = "form- control "data-bv-notempty-message =" Verification Code cannot be blank "data-bv-regexp =" true "data-bv-regexp = "[ 0-9] {6} "data-bv-regexp-message =" Incorrect verification code format "> </div> <div class =" form-group "> <input type = "email" class = "form-control" id = "exampleInputEmail1" placeholder = "Enter email" data-bv-notempty-message = "The Verification Code cannot be blank "> </div>

In the preceding example, the name attribute is added to the first form element, and the second form element does not have the name attribute. Both form elements use non-empty verification. The final result is as follows:

The result shows that to verify a form item, the form item must have the name attribute. Otherwise, the verification will not work.

2. To maintain good results, it is best to place the form elements in div. form-group.

For example:

<Label for = "exampleInputEmail1"> User Name </label> <div class = "input-group"> <input type = "text" class = "form-control required" placeholder = "User name" id = "username" name = "username" data-bv-notempty-message = "Enter the user name"/> <span class = "input- group-addon "> <span class =" glyphicon-user "> </span> </div>

The User Name input box and its label are directly placed under the form element. The final result is as follows:

When an input error occurs, the prompt information is placed under the entire form. The style has undergone great changes. Although it can achieve the verification effect, the style is unacceptable, the solution is to put the form elements to be verified in the div. below form-group:

<Div class = "form-group"> <label for = "exampleInputEmail1"> User Name </label> <div class = "input-group"> <input type = "text" class = "form-control required" placeholder = "User name" id = "username" name = "username" data-bv-notempty-message = "Enter the user name "/> <span class =" input-group-addon "> <span class =" glyphicon-user "> </span> </div> </ div>

3. prevent repeated submission of forms

Before bootstrapvalidator is introduced, you have written a piece of js code to prevent form submission. When you click 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 the form type. // get is used to identify the form of the search type. // post is used to identify the form to be added. The updated 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 bootstrapvalidator is introduced, it conflicts with this Code. The Code is displayed as if a verification error occurs. For example, if a required input item is not entered, the form is submitted, at this time, bootstrapvalidator will prompt you that this input is required. At this time, the submit button is in disable state. After you fill in the data, the button is normal and can be submitted. This is where the problem occurs, even if you enter normal data, the button is normal, but the form cannot be submitted. After troubleshooting for more than half a day, the problem lies in the previous js Code.

In fact, bootstrapvalidator has already been designed for repeated submission. If a form needs to be verified by bootstrapvalidator, When you click the submit button, the submit button will be grayed out until the server returns a response. So, if a form does not need to be verified, such as a search form, you can give the form a class, such as validation-form, and call $ ("form. validation-form "). bootstrapValidator (); leave the validators empty.

Recommended reading:

How to sort out the Form Verification plug-in bootstrapValidator in Bootstrap (recommended)

The above is a small Editor to introduce you to the BootStrap Validator usage considerations (must read), I hope to help you, if you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!