如何对数组输入类型进行checkValidity

Question

我在表(表单)中有如下所示的数组输入类型：

     <td>
         <input type="text" id="categoryname[]" name="categoryname[]" maxlength="100" class="form-control" placeholder="Category Name">
        </td>
        <td>
         <input type="text" id="productname[]" name="productname[]" maxlength="100" class="form-control" placeholder="Product Name" required>
         <div class="error-productname invalid-feedback"></div>
        </td>
    
    <button type="button" id="save" name="save" class="btn btn-block btn-primary" >Save</button>

如果类似以上情况，如何进行checkValidity (表单验证)？

通常情况下，如果正常输入类型是这样的，我就这样使用：

if (!$('#productname')[0].checkValidity()) {
          $('#productname').addClass('is-invalid');
          $('.error-productname').html($('#productname')[0].validationMessage);
          return false;
        }else{
          $('#productname').removeClass('is-invalid');
          $('.error-productname').html('');
        }

Answer 1

由于有多个相同名称的输入，您可以使用.each循环迭代数据，然后使用$(this)添加或从输入.Also删除类，以添加错误消息，可以使用$(this).closest('tr').find('.error-productname')..。

演示代码：

​

$("#save").click(function() {
  //loop through productname
  $("[name*=productname]").each(function() {
    //check validity
    if (!$(this)[0].checkValidity()) {
      $(this).addClass('is-invalid'); //add class
      $(this).closest('tr').find('.error-productname').html($(this)[0].validationMessage);
    } else {
      $(this).removeClass('is-invalid'); //remove
      $(this).closest('tr').find('.error-productname').html('');
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td>
      <input type="text" id="categoryname[]" name="categoryname[]" maxlength="100" class="form-control" placeholder="Category Name">
    </td>
    <td>
      <input type="text" id="productname[]" name="productname[]" maxlength="100" class="form-control" placeholder="Product Name" required>
      <div class="error-productname invalid-feedback"></div>
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" id="categoryname[]" name="categoryname[]" maxlength="100" class="form-control" placeholder="Category Name">
    </td>
    <td>
      <input type="text" id="productname[]" name="productname[]" maxlength="100" class="form-control" placeholder="Product Name" required>
      <div class="error-productname invalid-feedback"></div>
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" id="categoryname[]" name="categoryname[]" maxlength="100" class="form-control" placeholder="Category Name">
    </td>
    <td>
      <input type="text" id="productname[]" name="productname[]" maxlength="100" class="form-control" placeholder="Product Name" required>
      <div class="error-productname invalid-feedback"></div>
    </td>
    </tr>
</table>

<button type="button" id="save" name="save" class="btn btn-block btn-primary">Save</button>

​

Answer 2

所谓有效性，你是说表单验证？有一个脚本，这可能会有帮助。

var $ = jQuery;
$(document).ready(function($) {
  $("form[name='Cust_Form']").validate({
      errorElement: 'div',
    rules: {
        postal_code: {
            number: true,
            minlength: 4,
            maxlength: 4,
            required: true
            },
        email: {
            email: true
              },    
        unit: {
            number: true
                },   
         building: {
            number: true
                },   
        contact_2: {
            number: true,
            minlength: 11,
            maxlength: 11
        },
        contact_1: {
            number: true,
            minlength: 11,
            maxlength: 11
        }
      },
    // Specify validation error messages
    messages: {
        postal_code: {
            minlength: "Your postal code must be at least 4 characters long",
            number: "Please enter a valid postal code",
            maxlength: "Your postal code must be at least 4 characters long",
            required:  "Required field"
            },
        email: {
            email: "Please enter a valid email address"
            },  
        unit: {
            number: "Please enter a valid unit number"
                },   
        building: {
            number: "Please enter a valid building/house number"
                },  
        contact_1: {
            minlength: "Your contact number must be at least 11 characters long",
            number: "Please enter a valid contact number",
            maxlength: "Your contact number must be at least 11 characters long"
        },
        contact_2: {
            minlength: "Your contact number must be at least 11 characters long",
            number: "Please enter a valid fax/phone number",
            maxlength: "Your contact number must be at least 11 characters long"
        },
    },
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function(form) {
      form.submit();
    }
  });
});