Bootstrap Form Verification formValidation implements form dynamic verification, and validation Form Verification

Bootstrap Form Verification formValidation implements form dynamic verification, and validation Form Verification

Add input dynamically and add new verification methods dynamically!

Init status:

 

Click "+:

 

After verification:

Knowledge point:

1 first go to the official website download: http://formvalidation.io/

2. Import files. I will not talk much about the precautions. I have already discussed the remote verification Article.

3. keywords used: addField, removeField, and different

4. Note that their names are different on the official website. I am relatively lazy here. In addition, the project ajax does not use form submission, but is submitted in json format. Therefore, the name of x and y is the same.

Good start:

First, you must mark "+" as addPos in html, and then "-" as "removPos,

<Div id = "posXY" class = "panel-default"> <! -- Add --> <div class = "panel-heading"> set garage xy coordinates </div> <div class = "addPos form-group"> <div class = "col-lg-4 col-sm-4 col-xs-4 "> <input type =" text "class =" form-control text-left "name =" garageNo "placeholder =" parking garage "style =" min-width: 150px "/> </div> <div class =" col-lg-3 col-sm-3 col-xs-3 "> <input type =" text "class =" form-control "name =" posX "placeholder =" X "/> </div> <div class =" col-lg-3 col-sm-3 col-xs-3 "> <Input type =" text "class =" form-control "name =" posY "placeholder =" Y "/> </div> <div class =" col-lg-2 col-sm-2 col-xs-2 "> <button type =" button "class =" btn-default addButtonPos "> <I class =" glyphicon-plus "> </I> </button> </ div> </div> <! -- Delete --> <div class = "removPos form-group hide" id = "posTemplate"> <div class = "col-lg-4 col-sm-4 col-xs-4"> <input type = "text" class = "form-control text-left" name = "garageNo" placeholder = "Garage" style = "min-width: 150px "/> </div> <div class =" col-lg-3 col-sm-3 col-xs-3 "> <input type =" text "class =" form-control "name =" posX "placeholder =" X "/> </div> <div class =" col-lg-3 col-sm-3 col-xs-3 "> <input type =" text "class =" form-control "name =" posY "placeholder =" Y "/> </div> <div class =" col-lg-2 col-sm-2 col-xs-2 "> <button type =" button "class =" btn-default removeButtonPos "> <I class =" glyphicon-minus "> </I> </button> </div>

Then you can get a js:

/*** Add @ param $ that */function addButtonPosClick ($ that) {var panelId = $ that. parents (". topTemplate "). attr ("id"); var $ form = $ ('#' + panelId + "form") // defapanel Panel (panelId) var bookIndex = typeObj [panelId] ++; console. log (panelId, bookIndex) var $ template = $ ('#' + panelId + '# posTemplate'), $ clone = $ template. clone (). removeClass ('hide '). removeAttr ('id '). attr ('step', bookIndex ). insertBefore ($ template); // Update the name attributes $ clone. find ('[name = "garageNo"]'). attr ({"step": bookIndex, "name": "garageNo" + bookIndex }). click (function () {clickBindGarageNo (panelId, bookIndex )}). end (). find ('[name = "posX"]'). attr ("step", bookIndex ). end (). find ('[name = "posY"]'). attr ("step", bookIndex ). end () // Add new fields // Note that we also pass the validator rules for new field as the third parameter // $ ('# ultultform') // gFieldArr. push (panelId + '[' + bookIndex + ']. garageNo ') $ form. formValidation ('addfield', "garageNo" + bookIndex, formObj. sameAs (false )). formValidation ('addfield', 'posx', myPosXY ). formValidation ('addfield', 'pods', myPosXY)} function myFormValidation ($ form) {// var $ form =$ ("#" + $ panelId + "form ") $ form. formValidation ({framework: 'bootstrap ', locale: 'zh _ cn', message: 'invalid value', icon: {valid: 'glyphicon glyphicon-OK ', invalid: 'glyphicon glyphicon-delete', validating: 'glyphicon glyphicon-refresh'}, fields: {myimg: {validators: {notEmpty: {message: 'select a file upload '}, file: {extension: 'jpeg, jpg, png ', type: 'image/jpeg, image/png', maxSize: 1*1024*1024, message: 'The file must be in jpeg, jpg, and png format and must not exceed 1 MB '}}}}}). on ('click ','. addButtonPos ', function () {addButtonPosClick ($ (this)}) // Remove button click handler. on ('click ','. removeButtonPos ', function () {var $ that = $ (this) var panelId = $ that. parents (". topTemplate "). attr ("id"); // defaultPanel (panelId) var $ row = $ (this ). parents ('. form-group '), index = $ row. attr ('step'); // var myname = '[' + index + '] 'var bookIndex = typeObj [panelId] --; // $ (' # ultultform ') $ form. formValidation ('removefield ', $ row. find ('[name = "garageNo' + bookIndex + '"]'). formValidation ('removefield ', $ row. find ('[name = "posX"]'). formValidation ('removefield ', $ row. find ('[name = "posY"]') // Remove element containing the fields $ row. remove ();})

Because my project has multiple forms to submit. However, these functions are used for business similarity.

For example: var form=(“#”+panelId+”form”)Multiple forms are distinguished by panelId.

As mentioned above, the name of x and y is the same. However, you will find garageNo is a different name. Bookindex is added later. Why.

Because of business needs. The garageNo values in the same form cannot be the same. For example, the ID number of each person cannot be the same, but you and your deskmate can both be female or 18 years old ....

The removeField and addField keywords are well used.

The garageNo value cannot be the same. How can this problem be solved. See the following:

Var differentValid = function (diffstr) {var vv = {validators: {different: {field: diffstr, message: 'There cannot be the same garage' }}} return vv}

After you enter the garageNo value:

clickBindGarageNo(panelId,idx){    $form.formValidation('addField', "garageNo"+idx, differentValid(diffArr.toString()))      var fv =$form.data('formValidation');      fv.validate();}

What is diffArr. toString. This is a string that traverses the names of all garageNo entries. For example, there are 3 entries, and idx = 1 focuses on 1. DiffArr = ["garageNo0", "garageNo2",]

 

Note a bug: if more input is used, you will find that sometimes the input is not automatically verified. For example, when the date is verified, the date plug-in is used to click the date back, and the input is not verified.

At this time, you need to manually verify it again. The code above adds a new verification method and then verifies the entire form. If you only want to verify an input, use:

$form.formValidation('revalidateField', "field");

There is also a detail about the submission:

When the submit button is not set. Compared to the submit button in the form. This plug-in will automatically submit for you. But you will also find that. If you fail to submit the service. It will automatically refresh and then your page will become 404 page or another error page.

But sometimes we don't want him to refresh. What should I do?

A lot of online ajax submitted non-Refresh tutorials .. I prefer to use one of them. I do not place the submit button in form. Then:

$btn.click(function(){//....retrun false;)}

The above is the Bootstrap Form Verification formValidation introduced by the editor to implement the form dynamic verification function. I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!