使用验证器插件 Jquery 验证动态输入表单元素

Posted 2023-05-09

【中文标题】使用验证器插件 Jquery 验证动态输入表单元素

【英文标题】：Validate dynamic input form elements using Validator Plugin Jquery

【发布时间】：2016-05-28 21:46:14

【问题描述】：

我正在使用这个http://jqueryvalidation.org/ jquery 验证插件。

html动态表单会是这样的

<form name="baby_book" id="baby_book">
<input name="form_elements[16]" id="form_elements[16]">
<input name="form_elements[17]" id="form_elements[17]">
<input name="form_elements[18]" id="form_elements[18]">

<a class="myfont baby_book_save" href="javascript:void(0)"  onclick="validatefilesizeform('save')" >Save</a> 
</form>

我的 JS 代码会是这样的

<script type="text/javascript">
var validator="";

$(document).ready(function()

var max_length_rules= <?php echo json_encode($valid_rules); ?>;

validator=$("#baby_book").validate();

     $.each(max_length_rules,function(k,v)

             $.each(v, function(key, value)

                   $('input[id="'+key+'"]').rules('add',"required"); 
                );
        );

);

function validatefilesizeform(type)

    if(type == 'save')
     
         document.baby_book.sec_submit.value="save";

         if(validator.form())
         
            document.baby_book.submit();
         
    

</script>

在应用这样的动态规则时，它不会验证表单。

在控制台显示此错误

未捕获的类型错误：无法读取未定义的属性“形式”

谁能帮我添加动态规则。谢谢。

【参考方案1】：

这是因为当浏览器在onclick 属性中找到validatefilesizeform('save') 时，它会评估该表达式，即运行函数。使用此语法，您将该评估的结果分配给 onclick 事件，这不是您想要的。

Cannot read property 'form' of undefined 错误发生是因为在那一刻尚未执行 $(document).ready() 回调，并且当函数尝试执行 validator.form() 时，该变量已经未定义。稍后将在 $(document).ready() 中初始化。

要获得预期的行为并避免错误，您必须将 onclick 处理程序更改为此：

`onclick="function()  validatefilesizeform('save') "`

在这种情况下，您将一个函数注册为onclick 属性的值。并且这个函数会在控件被点击的时候执行。

为了更清楚：

// This is the value returned by the function evaluation:
validatefilesizeform('save')

// This is a function
function()  validatefilesizeform('save'); 

所以第二个是可以评估的函数。第一个评估函数。处理程序应该始终是函数，而不是值。