CODEWITHSUNDEEP
javascripthtmljquery
Novice
Novice

Reputation: 308

How to checkValidity on array input type

I have array input type in a table (form) like below :

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

How to do checkValidity (form validation) if like case above?

Normally i am using like this if normal input type :

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

Upvotes: 0

Views: 428

Answers (2)

Swati
Swati

Reputation: 28522

As there are mutliple such inputs with same name you can use .each loop to iterate through your data and then using $(this) add or remove class from inputs .Also, to add error message you can use $(this).closest('tr').find('.error-productname')..

Demo Code :

$("#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>

Upvotes: 1

dprian
dprian

Reputation: 25

by validity, you mean form validation? there's a script for that, this might help.

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

Upvotes: 0

Related Questions