Question

我已经发现了这个问题，但不是我的情况。 jQuery Validate Uncaught TypeError: Cannot call method 'getAttribute' of undefined 。我在表单上有一个表单验证错误提交未捕获的TypeError：无法在Function.attributeRules读取未定义的属性'getAttribute'它给了我这个错误，即使字段为空也会提交表单。当用户添加另一个并且不为所有选项选择相同选项时，会出现此错误。例如，如果用户在表单中有2个下拉列表，并且他在第一个中选择“是”而在其他情况下没有，则此错误将在未经验证的情况下提交并形成提交，如果他在两个下拉列表中选择相同的选项，则表单将不会在未经过验证的情况下提交。可能是什么问题？

HTML ：

页面加载时，此选择元素将可见：

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

如果用户选择“是”，则如果“否”，则会显示以下字段，然后保持隐藏状态。

<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);"/>

可以通过cliking Add Another按钮添加更多字段。

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

它会添加一个相同的下拉列表，选项为yes和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>

如果用户选择“是”，则如果“否”，则会显示以下字段，然后保持隐藏状态。

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

这是我如何验证表格：

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

更新

此函数工作正常，但如果用户在一个选择元素中选择“是”，而在其他选择元素中选择“否”，则提交空白表单。为什么验证无法阻止提交空白表单？

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

更新2：

这是它给出错误的代码，我不明白为什么？ var rules = {}， $ element = $（元素）， type = element.getAttribute（“type”），方法，价值;

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;
    },

如果选择的选项不同，则jQuery表单验证不适用于动态创建的字段

0 个答案: