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

Validate dynamic input form elements using Validator Plugin Jquery

本文关键字：验证 输入 表单 动态 元素 插件 Jquery      更新时间：2023-09-26

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

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

在控制台中，它显示此错误

未

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

谁能帮我如何添加 dyanmic 规则.谢谢。

这是因为

当浏览器在 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'); }

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

相关文章：