Detailed example of Bootstrap form validation formValidation

This article mainly introduces the Bootstrap form validation formValidation to realize the form dynamic validation function. Friends who need it can refer to the Bootstrap tutorial

Dynamicly add input and dynamically Add new verification method!

init status:

After clicking "+":

After verification:

Knowledge points:

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

2. Import the file. I won’t go into details about the precautions. I have already mentioned them in the remote verification article.

3 Keywords used: addField, removeField, different

4 Note that the names of the examples on the official website are different. I'm a bit lazy here. And when the project is ajaxed, the form is not used for submission, but is submitted as json by itself, so the names of x and y have the same name.

Good start:

First of all, there must be a "+" in the html, marked as addPos, and then there must be a "-" marked as "removPos,

<p id="posXY" class=" panel panel-default ">
<!-- 添加-->
                <p class="panel-heading" >设置车库xy坐标</p>
                <p class="addPos form-group">
                  <p class="col-lg-4 col-sm-4 col-xs-4" >
                    <input type="text" class="form-control text-left" name="garageNo" placeholder="停车库" style="min-width: 150px"/>
                  </p>
                  <p class="col-lg-3 col-sm-3 col-xs-3" >
                    <input type="text" class="form-control" name="posX" placeholder="X"/>
                  </p>
                  <p class="col-lg-3 col-sm-3 col-xs-3" >
                    <input type="text" class="form-control" name="posY" placeholder="Y"/>
                  </p>
                  <p class="col-lg-2 col-sm-2 col-xs-2" >
                    <button type="button" class="btn btn-default addButtonPos"><i class="glyphicon glyphicon-plus"></i></button>
                  </p>
                </p>
                <!-- 删除 -->
                <p class="removPos form-group hide" id="posTemplate">
                  <p class="col-lg-4 col-sm-4 col-xs-4" >
                    <input type="text" class="form-control text-left" name="garageNo" placeholder="停车库" style="min-width: 150px"/>
                  </p>
                  <p class="col-lg-3 col-sm-3 col-xs-3" >
                    <input type="text" class="form-control" name="posX" placeholder="X"/>
                  </p>
                  <p class="col-lg-3 col-sm-3 col-xs-3" >
                    <input type="text" class="form-control" name="posY" placeholder="Y"/>
                  </p>
                  <p class="col-lg-2 col-sm-2 col-xs-2" >
                    <button type="button" class="btn btn-default removeButtonPos"><i class="glyphicon glyphicon-minus"></i></button>
                  </p>
                </p>
</p>

Then Here is a js:

/**
   * pos添加
   * @param $that
   */
  function addButtonPosClick($that){
    var panelId = $that.parents(".topTemplate").attr("id");
    var $form=$('#'+panelId+"form")
//    defaultPanel(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
//    $('#defaultForm')
//    gFieldArr.push(panelId+'[' + bookIndex + '].garageNo')
    $form
      .formValidation('addField', "garageNo"+bookIndex, formObj.sameAs(false))
      .formValidation('addField', 'posX', myPosXY)
      .formValidation('addField', 'posY', myPosXY)
  }
 function myFormValidation($form){
//    var $form=$("#"+$panelId+"form")
    $form
        .formValidation({
          framework: 'bootstrap',
          locale: 'zh_CN',
          message: '值无效',
          icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
          },
          fields:
          {
            myimg:{
              validators: {
                notEmpty: {
                  message: '请选择一个文件上传'
                },
                file: {
                  extension: 'jpeg,jpg,png',
                  type: 'image/jpeg,image/png',
                  maxSize: 1*1024 * 1024,
                  message: '该文件必须为jpeg,jpg,png格式和必须不超过1MB的大小'
                }
              }
            }
          }
        })
        .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]--;
//          $('#defaultForm')
          $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 form submissions, but the business is similar, I use these functions

For example: var form=("#" +panelId+”form”)Use panelId to distinguish multiple forms.

As mentioned above, the names of x and y are the same, but if you are careful, you will find that garageNo has a different name. . Bookindex was added later, why.

Because of business requirements. For example, the identity number of each person cannot be the same. The tablemates can be both female and 18 years old...

The keywords removeField and addField

## cannot be the same. How to do it. Please see below:

var differentValid= function(diffstr){
    var vv={
      validators: {
        different: {
          field: diffstr,
          message: '不能有相同的停车库'
        }
      }
    }
    return vv
  }

When the user enters the value of garageNo:

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

What is this diffArr.toString()? This is the garageNo of all entries.

String of nameFor example: there are 3 entries, idx=1 and the focus is on 1. Then diffArr=["garageNo0","garageNo2",]

Note a bug: If you use too much input, you will find that sometimes the input is not automatically verified. For example, when you use the date plug-in to click on the date, the input is not verified at this time. You need to manually verify it again. The above code first adds a new verification method and then verifies the entire form. If you just want to verify an input, please use:

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

There is also a detail about submission:

When we don’t set a submit button, this plug-in will automatically refresh it for you. The page becomes a 404 page or other error page.

But sometimes we don’t want it to refresh. What should I do?

There are many tutorials on ajax submission. One is. I don’t put the submit button in the form. Then:

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

[Related recommendations]

##1.

Javascript Free Video Tutorial

2. Detailed examples of commonly used middleware body-parser in Nodejs

3. JavaScript form verification implementation code_javascript skills

4. Single line of JS to implement money format inspection on the mobile terminal

5. Example tutorial of vue v-model form control binding

The above is the detailed content of Detailed example of Bootstrap form validation formValidation. For more information, please follow other related articles on the PHP Chinese website!