How to checkValidity on array input type

Question

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

Hi can you make this runnable ? Also there are mutliple such inputs with same name? — Swati
– Swati, Commented Jan 25, 2021 at 6:58
For javascript part, i took from other file which is only using 1 form and normal input type. My issue with multiple inputs with same name (array) — Novice
– Novice, Commented Jan 25, 2021 at 7:07

Swati · Accepted Answer · 2021-01-25 07:43:16Z

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>

dprian · Accepted Answer · 2021-01-21 08:13:44Z

0

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

answered Jan 21, 2021 at 8:13

dprian

258 bronze badges

3 Comments

Novice Over a year ago

Thanks, but is it possible to use form validation?

dprian Over a year ago

yes, you can use it. just add the script below your html code, or u can create another js file for that. totally your choice.

Novice Over a year ago

why i receive no validate when submit and how to send the message to invalid-feedback message? sorry im still newbie for this

Collectives™ on Stack Overflow

How to checkValidity on array input type

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related