This article recommends a bootstrapValidator.js made from Twitter. Bootstrap is made from Twitter, so using the original validator is more trustworthy. There will be many models for searching for bootstrapValidator on Baidu, but I only recommend this one:
1. Take a look
For a simple introduction, here is only an empty check.
BootstrapValidator official download address
2. Resource reference
After downloading the resource package, you can see the following directory.
Then introduce the following three files to your project.
<link type="text/css" rel="stylesheet" href="${ctx}/components/validate/css/bootstrapValidator.css" /><script type="text/javascript" src="${ctx}/components/validate/js/bootstrapValidator.js"></script><script type="text/javascript" src="${ctx}/components/validate/js/language/zh_CN.js"></script>3. Member name is not empty project configuration
<form action="${ctx}/login" method="post" onsubmit="return validateCallback(this)"> <div> <div> <label>Account</label> <input type="text" autofocus name="username" placeholder="Please enter the member number" autocomplete="off" data-bv-notempty /> </div> </div></form>data-bv-notempty means that the member number should be used as an empty check.
The div of form-group is required, otherwise the "too much recursion" error will be reported.
When submitting the form form, the validateCallback method will be executed. This method is specifically introduced in step 5.
4. Enable bootstrap validator after the page loads
$(function() { // validate form $("form.required-validate").each(function() { var $form = $(this); $form.bootstrapValidator(); // Fix bootstrap validator repeatedly submits bug to the server $form.on('success.form.bv', function(e) { // Prevent form submission e.preventDefault(); }); }); });Add the 'class="required-validate"' attribute on the form form, and then obtain the corresponding form form through jquery, and perform the default bootstrapValidator loading on it.
Be sure to pay attention to some of the code commented in the above code. For details, please refer to the following to fix the bugs submitted by BootstrapValidator repeatedly. The specific content is as follows
BootstrapValidator is very beautiful, but there are often murderous intents hidden under your beautiful face. This is why there are repeated submission bugs .
Solution:
// validate form$("form.required-validate", $p).each(function() { var $form = $(this); $form.bootstrapValidator().on('success.form.bv', function(e) { // Prevent the default event from committing e.preventDefault(); });});Set the on method for BootstrapValidator, whose key is success.form.bv and value is e.preventDefault();.
Bug Investigation:
Survey results:
1. When you do not use BootstrapValidator, there will be no problem as shown in the figure.
2. Only when you click on the first time, the submission will be repeated twice. Then, after re-entering the username, you will submit it in a single time.
The bug occurs environment:
Copy the code as follows:<form action="${ctx}/mem/login?callbackType=forward" method="post" onsubmit="return validateCallback(this, tabAjaxDone)" type="login">
...
<button type="submit">Submit</button>
</form>
describe:
This is an ordinary form form, with the request address in the action, and there is an onsubmit method in the form, which is mainly to verify the form, then send the request, and finally call back the tabAjaxDone method.
Bug analysis:
1.There is definitely no problem with the form form. If there is no bootstrap validate, there is no problem at all.
2. There was no problem when using jquery validate before.
3. Then the problem can only happen on bootstrap validate.
4. There is no problem with the default use of bootstrap validate, because it will only be repeated when the first click submit.
5. Then this may be that bootstrap validate has the default submission request.
If you look at the validate object again, you can see that there are many events by default, among which formsuccess is the most suspicious, which means that it may trigger the submission request again.
Bug debugging:
// validate form$("form.required-validate", $p).each(function() { var $form = $(this); $form.bootstrapValidator();// .on('success.form.bv', function(e) {// // Prevent the default event submission// e.preventDefault();// });});1. When the page is loaded for the first time, BootstrapValidator needs to be loaded in the above method before front-end data verification can be performed.
2. You have seen the commented code, maybe you can guess it, and that's the solution. That's right, add this event processing to form and use e.preventDefault(); to prevent the default event submission.
5. Verify the item when submitting form
function validateCallback(form, callback, confirmMsg) { YUNM.debug("enter into form form validation and submission"); var $form = $(form); var data = $form.data('bootstrapValidator'); if (data) { // Components that repair memory do not verify data.validate(); if (!data.isValid()) { return false; } } $.ajax({ type : form.method || 'POST', url : $form.attr("action"), data : $form.serializeArray(), dataType : "json", cache : false, success : callback || YUNM.ajaxDone, error : YUNM.ajaxError }); return false;}After obtaining the form form in validateCallback, the form can be returned through the isValid method to verify whether it passes.
After the form verification is passed, submit the form to the server through ajax.
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all about this article, I hope it will be helpful to everyone's learning.