jQuery Form validation does not work with dynamically created fields if options selected are different

Question

I have found this question already but it is not my case. jQuery Validate Uncaught TypeError: Cannot call method 'getAttribute' of undefined . I have a form validation error on form submit Uncaught TypeError: Cannot read property 'getAttribute' of undefined at Function.attributeRules It gives me this error and form gets submitted even the fields are empty. This error comes when user add another and do not select same options for all. For example, if user have 2 dropdowns in the form and he select yes in first and no in other then this error will come and form submit without being validated and if he selects same option in both dropdowns then form will not submit without being validated. What can be the issue?

HTML :

This select element will be visible when page loads :

<select name="engravingOption[]" id="engravingOption_<?php echo $i ?>"  class="engravingOptions">
 <option value="No" <?php echo((isset($_SESSION['engravingOption']) && $_SESSION['engravingOption'][$i-1]=='No')?'selected="selected"':'');?>>No</option>
 <option value="Yes" <?php echo((isset($_SESSION['engravingOption']) && $_SESSION['engravingOption'][$i-1]=='Yes')?'selected="selected"':'');?>>Yes</option>
</select>

If user selects yes then the following field will get visible if no then it stay hidden.

<input type="text" name="engraving_text[]" id="engraving_txt_<?php echo $i ?>"  class="element text form-control" maxlength="20" placeholder="Engraving here (20 words)" value="<?php if(isset($_SESSION['engraving_text'])) echo $_SESSION['engraving_text'][$i-1] ?>" onblur="lengthCountOnBlur(this, 'divcount_<?php echo $i; ?>');" onkeyup="limitTextCount(this, 'divcount_<?php echo $i; ?>', 20);" onkeydown="limitTextCount(this, 'divcount_<?php echo $i; ?>', 20);"/>

There is an option to add more fields by cliking Add Another button.

<div id="li_add_another_clipboard">
    <button type="button" id="add_another_clipboard">Add Another</button>
</div>

It will add a same dropdown with option of yes and no.

<select name="engravingOption[]" id="engravingOption_<?php echo $add_number ?>"  class="engravingOptions">
 <option value="No" <?php echo((isset($_SESSION['engravingOption']) && $_SESSION['engravingOption'][$add_number-1]=='No')?'selected="selected"':'');?>>No</option>
 <option value="Yes" <?php echo((isset($_SESSION['engravingOption']) && $_SESSION['engravingOption'][$add_number-1]=='Yes')?'selected="selected"':'');?>>Yes</option>
</select>

If user selects yes then the following field will get visible if no then it stay hidden.

<input type="text" name="engraving_text[]" id="engraving_txt_<?php echo $add_number ?>"  class="element text form-control" maxlength="20" placeholder="Engraving here (20 words)" value="<?php if(isset($_SESSION['engraving_text'])) echo $_SESSION['engraving_text'][$add_number-1] ?>" onblur="lengthCountOnBlur(this, 'divcount_<?php echo $add_number; ?>');" onkeyup="limitTextCount(this, 'divcount_<?php echo $add_number; ?>', 20);" onkeydown="limitTextCount(this, 'divcount_<?php echo $add_number; ?>', 20);" required/>

This is How I am validating form :

$('#form').validate({
  rules: {
   "clipboardQuantity[]":"required",
   "clipboard_color[]":"required",
   "clipboard_label[]":"required",
   "engraving_text[]":"required",    
  },
  submitHandler: function(form) {
   var $form = $(form);
   $.ajax({
   url: $form.action,
   type: $form.method,
   data: $form.serialize(),
   success: function(response) {
   if (response == false)
   {alert('could not submit!')}
   }
   });
 }
});

UPDATE:

this function works fine but still if user select YES in one select element and NO in other select element then blank form submitted. Why validations fail to stop blank form from being submitted?

var clipboardsCount=Number('<?php if(isset($_SESSION["clipboardsCount"])) echo $_SESSION["clipboardsCount"]?>');if(clipboardsCount == 0){clipboardsCount=1;}

$(document).on('change', '.engravingOptions', function (e) {
     for(var i=1; i<= clipboardsCount; i++) {
        var value = $("#engravingOption_"+i).val();
        if (value == 'No') {
         $('#li_engraving_txt_'+i).hide();
         $('#engraving_txt_'+i).val('');
        }
        else if (value == 'Yes') {
         $('#li_engraving_txt_'+i).show();
        }
      }
    });

UPDATE 2 :

This is the code for which it gives error, I don't understand why? var rules = {}, $element = $( element ), type = element.getAttribute( "type" ), method, value;

attributeRules: function( element ) {
        var rules = {},
            $element = $( element ),
            type = element.getAttribute( "type" ),
            method, value;

        for ( method in $.validator.methods ) {

            // support for <input required> in both html5 and older browsers
            if ( method === "required" ) {
                value = element.getAttribute( method );
                // Some browsers return an empty string for the required attribute
                // and non-HTML5 browsers might have required="" markup
                if ( value === "" ) {
                    value = true;
                }
                // force non-HTML5 browsers to return bool
                value = !!value;
            } else {
                value = $element.attr( method );
            }

            // convert the value to a number for number inputs, and for text for backwards compability
            // allows type="date" and others to be compared as strings
            if ( /min|max/.test( method ) && ( type === null || /number|range|text/.test( type ) ) ) {
                value = Number( value );
            }

            if ( value || value === 0 ) {
                rules[ method ] = value;
            } else if ( type === method && type !== "range" ) {
                // exception: the jquery validate 'range' method
                // does not test for the html5 'range' type
                rules[ method ] = true;
            }
        }

        // maxlength may be returned as -1, 2147483647 ( IE ) and 524288 ( safari ) for text inputs
        if ( rules.maxlength && /-1|2147483647|524288/.test( rules.maxlength ) ) {
            delete rules.maxlength;
        }

        return rules;
    },

do you generate your form using PHP, or it is already created withing the DOM statically? — Jeffery ThaGintoki, Sep 08 '17 at 01:33
In a first try to fix check this link for the array input group validation: https://stackoverflow.com/questions/24670447/how-to-validate-array-of-inputs-using-validate-plugin-jquery — Jeffery ThaGintoki, Sep 08 '17 at 01:42
I am updating my question I kind of missed some code here. Please check updated question — Haroon, Sep 08 '17 at 01:55
By the way I already have that updated code in jquery.validate.js https://stackoverflow.com/questions/24670447/how-to-validate-array-of-inputs-using-validate-plugin-jquery — Haroon, Sep 08 '17 at 02:12
My problem is if user do not select same option in each dropdown then issue comes, and if user do not add a new element then all work fine — Haroon, Sep 08 '17 at 02:13
I have fixed your function and yes it has lot of issues: https://jsfiddle.net/ka3m8fmt/3/ — Jeffery ThaGintoki, Sep 08 '17 at 08:47
@JefferyThaGintoki Sorry I don't get you what you have fixed in my fucntion ? I don't see any change — Haroon, Sep 08 '17 at 16:07
you were passing to your function the `event` then what you do is `$(event)` which is wrong because you will be selecting the `Target` instead what you want is the current targeted element in the DOM so you need to do `$(limitField_id.currentTarget)`, then there are other issues with you selecting the value of dropdown in a wrong way, just copy my function to your code and you will see the changes. — Jeffery ThaGintoki, Sep 08 '17 at 16:46
@JefferyThaGintoki but this fiddle has same function as in my question https://jsfiddle.net/ka3m8fmt/3/ nothing changed for me :( — Haroon, Sep 08 '17 at 16:51
sorry my mistake i though I saved the changes, here i did the changes so fast: https://jsfiddle.net/ka3m8fmt/6/ — Jeffery ThaGintoki, Sep 08 '17 at 16:59
var id = $(e.currentTarget).attr('id'); var res = id.split("_"); Uncaught TypeError: Cannot read property 'split' of undefined this is the error for it — Haroon, Sep 08 '17 at 17:28
change the `$('select[name=selectNameHere]')` to match your select. — Jeffery ThaGintoki, Sep 08 '17 at 17:32
use css selector `select[id*=engravingOption]` this means to select all the select elements that has 'engravingOption' string in its ID — Jeffery ThaGintoki, Sep 08 '17 at 20:24
ok that function is fixed but validations for name="engraving_text[]" still doesn't work if engravingoption 2 dropdown have different options selected and break all the form validations and submit blank — Haroon, Sep 08 '17 at 21:47

jQuery Form validation does not work with dynamically created fields if options selected are different

0 Answers0