用动态输入进行Jquery验证

我在表单中有很多类似名称的字段。它们都有相同的验证规则和消息。我想要的只是在js部分中使用一些变量，并缩短此代码并使其更具动态性。但是我无法弄清楚如何去做。用动态输入进行Jquery验证

HTML表单：

<form id="myForm" novalidate="novalidate"> 


      <div class="row form-section mr-b30"> <!-- FORM SECTION START --> 
      <div class="col-xl-12 form-blocks-wrapper"> <!-- FORM BLOCK WRAPPER START --> 
       <div class="container-full form-block mr-b30" id="Farmasotik_Formlar"> <!-- FORM BLOCK START --> 
       <div class="row form-parts-wrapper"> <!-- FORM PART START --> 
        <div class="container"> 
        <div class="row form-parts-group"> 

         <div class="col-xl-6 select-container"> 
          <div class="row"> 
          <div class="col-xl-12 container-title"> 
           <h4>Field 1</h4> 
          </div> 
          <div class="input-field select-item-container col-xl-12"> 
           <select class="select-box" id="field[0][0]" name="field[0][0]" required="required" aria-required="true"> 
           <option value="" disabled selected>Choose your option</option> 
           <option value="1">Option 1</option> 
           <option value="2">Option 2</option> 
           <option value="3">Option 3</option> 
           </select> 
          </div> 
          </div> 
         </div> 
         <div class="col-xl-6 select-container"> 
         <div class="row"> 
          <div class="col-xl-12 container-title"> 
          <h4>Field 2</h4> 
          </div> 
          <div class="input-field select-item-container col-xl-12"> 
          <select class="select-box" id="field[0][1]" name="field[0][1]" required="required" aria-required="true"> 
           <option value="" disabled selected>Choose your option</option> 
           <option value="1">Option 1</option> 
           <option value="2">Option 2</option> 
           <option value="3">Option 3</option> 
          </select> 
          </div> 
         </div> 
         </div> 
         <div class="col-xl-6 select-container"> 
          <div class="row"> 
          <div class="col-xl-12 container-title"> 
           <h4>Field 3</h4> 
          </div> 
          <div class="input-field select-item-container col-xl-12"> 
           <select class="select-box" id="field[1][0]" name="field[1][0]" required="required" aria-required="true"> 
           <option value="" disabled selected>Choose your option</option> 
           <option value="1">Option 1</option> 
           <option value="2">Option 2</option> 
           <option value="3">Option 3</option> 
           </select> 
          </div> 
          </div> 
         </div> 
         <div class="col-xl-6 select-container"> 
          <div class="row"> 
          <div class="col-xl-12 container-title"> 
           <h4>Field 4</h4> 
          </div> 
          <div class="input-field select-item-container col-xl-12"> 
           <select class="select-box" id="field[1][1]" name="field[1][1]" required="required" aria-required="true"> 
           <option value="" disabled selected>Choose your option</option> 
           <option value="1">Option 1</option> 
           <option value="2">Option 2</option> 
           <option value="3">Option 3</option> 
           </select> 
          </div> 
          </div> 
         </div> 
         <div class="col-xl-6 select-container"> 
          <div class="row"> 
          <div class="col-xl-12 container-title"> 
           <h4>Field 5</h4> 
          </div> 
          <div class="input-field select-item-container col-xl-12"> 
           <select class="select-box" id="field[2][0]" name="field[2][0]" required="required" aria-required="true"> 
           <option value="" disabled selected>Choose your option</option> 
           <option value="1">Option 1</option> 
           <option value="2">Option 2</option> 
           <option value="3">Option 3</option> 
           </select> 
          </div> 
          </div> 
         </div> 
         <div class="col-xl-6 select-container"> 
          <div class="row"> 
          <div class="col-xl-12 container-title"> 
           <h4>Field 6</h4> 
          </div> 
          <div class="input-field select-item-container col-xl-12"> 
           <select class="select-box" id="field[2][1]" name="field[2][1]" required="required" aria-required="true"> 
           <option value="" disabled selected>Choose your option</option> 
           <option value="1">Option 1</option> 
           <option value="2">Option 2</option> 
           <option value="3">Option 3</option> 
           </select> 
          </div> 
          </div> 
         </div> 
        </div> 
        </div> 
       </div> <!-- FORM PART END --> 
       </div> <!-- FORM BLOCK END --> 
      </div> <!-- FORM BLOCK WRAPPER END --> 
      </div> <!-- FORM SECTON END --> 
      <input type="submit" value="submit" id="submit" name="action"> 
     </form>

Validation.js：

$(document).ready(function() { 
    $("select").material_select(); 
    $("select[required]").css({display: "block", height: 0, padding: 0, width: 0, position: 'absolute'}); 

    var req = "Required."; 

    $("#myForm").validate({ 
    rules: { 
     field[0][0]: { 
     required: true 
     }, 
     field[0][1]: { 
     required: true 
     }, 
     field[1][0]: { 
     required: true 
     }, 
     field[1][1]: { 
     required: true 
     }, 
     field[2][0]: { 
     required: true 
     }, 
     field[2][1]: { 
     required: true 
     } 
    }, 
    messages: { 
     field[0][0]: { 
     required: req 
     }, 
     field[0][1]: { 
     required: req 
     }, 
     field[1][0]: { 
     required: req 
     }, 
     field[1][1]: { 
     required: req 
     }, 
     field[2][0]: { 
     required: req 
     }, 
     field[2][1]: { 
     required: req 
     } 
    }, 
    errorElement : 'div', 
errorPlacement: function(error, element) { 
var placement = $(element).data('error'); 
if (placement) { 
    $(placement).append(error) 
} else { 
    error.insertAfter(element); 
} 
} 
    }); 

});

这就是我想要的：

$(document).ready(function() { 
    $("select").material_select(); 
    $("select[required]").css({display: "block", height: 0, padding: 0, width: 0, position: 'absolute'}); 

    var req = "Required."; 
    var field = "field"+"*"; 

    $("#myForm").validate({ 
    rules: { 
     field: { 
     required: true 
     } 
    }, 
    messages: { 
     field: { 
     required: req 
     } 
    }, 
    errorElement : 'div', 
errorPlacement: function(error, element) { 
var placement = $(element).data('error'); 
if (placement) { 
    $(placement).append(error) 
} else { 
    error.insertAfter(element); 
} 
} 
    }); 

});

来源

2017-05-26 THO

您可以通过纯jQuery的验证，而不是使用'.validate（）'。 – doutriforce

您可以使用循环来创建规则对象，遍历字段数组并向您添加项目。 – ADyson

*“缩短并且变得更加动态化”*是一个非常广泛的请求，因为有很多不同的方式来指定使用这个插件的规则。请具体说明你想要达到的目标。否则，这里有一些提示：https://stackoverflow.com/a/9056425/594235 – Sparky

试试这个，

$(document).ready(function() { 

    var req = "Required."; 

    $("#myForm").validate({ 

    submitHandler: function(form) { 
      form.submit(); 
    } 
    }); 

    $(".select-box").each(function(){ 
     $(this).rules("add", { 
      required:true, 
      messages:{required:req} 
     }); 
    }); 
});

的jsfiddle为同一

http://jsfiddle.net/tg2rupcg/72/

来源

2017-05-29 04:38:56

用动态输入进行Jquery验证

回答

相关问题