我正在使用Laravel 4 php框架开发一个网站,我有一个显示使用jQuery Validation插件验证的表单的页面。
单击表单中的按钮,通过.load()
方法向表单添加几个字段,并带有jQuery AJAX请求。在我将字段添加到表单后,我想为这些字段添加验证规则,我使用.rules()
方法。
然而,当我的javascript被调用时,我收到以下错误:
未捕获的TypeError:无法读取未定义的jquery.validate.min.js的属性'form':2
作为测试,我将一个元素添加到相应的div
并在其上调用.rules()
,并按预期进行验证,因此似乎由于某种原因我收到错误,因为我的错误表单元素使用php生成,然后使用.load()
添加到页面。
这是我的代码:
相关网页:
<?php echo Form::open(array('id' => 'researcher-info-form')) ?>
<?php foreach($researcher_template as $slug => $title): ?>
<tr>
<td></td>
<td>
<?php echo Form::label('researcher_' . $slug, $title); ?>
<?php echo Form::text('researcher_' . $slug); ?>
</td>
<td class="validation-error-message"></td>
</tr>
<?php endforeach; ?>
...
<div id="billing-address-wrapper">
<?php // a jQuery event loads form fields into this div dynamically. ?>
</div>
...
<?php Form::close(); ?>
...
处理此问题的javascript是:
jQuery(document).ready(function($) {
$("form").validate({
submitHandler: submitSeqRequest,
rules: {
researcher_name: "required",
researcher_email: {
required: true,
email: true
},
pi_name: "required",
template: "required",
primer: "required",
dna_type: "required",
bases_needed: "required"
},
errorPlacement: function(error, element) {
error.appendTo( element.parent("td").next("td") );
}
});
addLabAddress();
});
function addLabAddress() {
$('#add-my-group').click( function() {
$('#billing-address-wrapper').load("/order/enterLabAddress");
$('#group_name').rules("add", {
required: true
})
});
return false;
}
位于/order/enterLabAddress
的部分视图是:
<?php $billing_template = (new Lab)->billing_template; ?>
<?php foreach($billing_template as $slug => $title): ?>
<div>
<?php echo Form::label($slug, $title); ?>
<?php echo Form::text($slug); ?>
</div>
<?php endforeach; ?>
有人可以帮忙吗?为什么我使用.load()
收到此错误?而不是.append()
?
答案 0 :(得分:0)
使用.load()/ AJAX调用数据时,验证JS脚本不知道这些新元素是否存在。
请注意,您的验证设置是在页面最初加载时完成的
jQuery(document).ready(function($) {
你需要在每个新的.load()之后运行那个ready(...)函数的内容,这样验证器就会离开新的DOM元素。