jQuery驗證與動態輸入

Question

我在表單中有很多名稱相似的字段。 它們都有相同的驗證規則和消息。 我想要的只是在js部分中使用一些變量，並縮短此代碼並使之更加動態。 但是我不知道該怎么做。

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);
}
}
  });

});

Answer 1

嘗試這個，

$(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/