使用Validator Plugin Jquery验证动态输入表单元素

Question

我正在使用此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>

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

在控制台中显示此错误

未被捕获的TypeError：无法读取未定义的属性“ form”

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

Answer 1

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

发生Cannot read property 'form' of undefined错误的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'); }

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