用動態輸入進行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驗證

回答

相關問題