Блог

У меня есть тип ввода массива в таблице (форме), как показано ниже :

      <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>
 

Как выполнить проверку подлинности (проверку формы), если, как в приведенном выше случае?

Обычно я использую так, если обычный тип ввода :

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

Поскольку существует множество таких входных данных с одинаковым именем, вы можете использовать .each цикл для перебора ваших данных, а затем использовать $(this) добавление или удаление класса из входных данных.Кроме того, чтобы добавить сообщение об ошибке, вы можете использовать $(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> 

под достоверностью вы подразумеваете проверку формы? для этого есть скрипт, это может помочь.

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