不带表单的jQuery验证元素
不带表单的jQuery验证元素
提问于 2013-08-06 15:33:40
使用ASP.Net webforms进行验证。
默认情况下，ASP.Net会在根级别添加一个表单。这意味着我们只需要在表单中添加所有的控件。
然而，我需要定义一小部分需要验证的页面，我使用了jQuery验证插件。
HTML
<html>
<body>
<form method="post" action="AssetDetails.aspx" id="Form1" enctype="multipart/form-
data">
//Other page content goes here. which doesnt require validation
<form class="form-horizontal" id="validation-form" method="get">
<div class="row-fluid">
<div class="widget-header header-color-blue2">
<h5>
Step 1</h5>
</div>
<input type="email" name="ctl00$MainContent$AssetTabs$DefineCriticality$email" id="email" class="span6" />
</div>
</form>
</form>
</body></html>Javascript
$(document).ready(function(){
alert($('#validation-form').length); // gives 0, because this form nested under
another form generated by ASP.Net
$('#validation-form').validate({
errorElement: 'span',
errorClass: 'help-inline',
focusInvalid: false,
rules: {
email: {
required: true,
email: true
}},
messages: {
email: {
required: "Please provide a valid email.",
email: "Please provide a valid email."
}},
errorPlacement: function (error, element) {
error.insertAfter(element);
}
});
});但问题是，我得到的错误this[0]是未定义在jquery验证文件。我发现在DOM中找不到#validation-form，因为这个表单位于愚蠢的ASP.Net生成的根(父)元素中。
我们该如何处理这件事？
有没有一种不需要表单就可以使用jQuery验证插件来验证元素的方法？
编辑:获得了一些解决方案：
最后，我使用父表单并根据字段名添加规则。ASP.Net webform再次开始制造麻烦，因为它以不同的方式生成控件名称字段。
以下是围绕代码的工作。
var validationParams = {
errorElement: 'span',
errorClass: 'help-inline',
focusInvalid: false,
rules: {},
messages: {},
invalidHandler: function (event, validator) {
$('.alert-error', $('.login-form')).show();
},
highlight: function (e) {
$(e).closest('.control-group').removeClass('info').addClass('error');
},
success: function (e) {
$(e).closest('.control-group').removeClass('error').addClass('info');
$(e).remove();
},
errorPlacement: function (error, element) {
error.insertAfter(element);
},
submitHandler: function (form) {
},
invalidHandler: function (form) {
}
};
var emailFieldName = $('#email').attr('name');
validationParams['rules'][emailFieldName] = { required: true };
validationParams['messages'][emailFieldName] = { required: "Email is required" };
$('#Form1').validate(validationParams);有没有其他更好的方法呢？
回答 1
Stack Overflow用户
发布于 2013-08-06 15:47:42
我不是告诉你其他的选项，而是你所问的，如果你可以使用validate插件而不需要表单。
要让jQuery验证插件正常工作，绝对需要有<form></form>标记，或者根本不需要。
如果使用ajax，则必须[将ajax放在jQuery验证插件的submitHandler中
您可以删除或阻止验证，但仍然使用jQuery action。
您可以将您的ajax和return false放入submitHandler中，并且不会进行常规提交：
$(document).ready(function() {
$('#myform').validate({ // initialize plugin
// your rules & options,
submitHandler: function(form) {
// your ajax would go here
return false; // blocks regular submit since you have ajax
}
});
});查看演示：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18074210
复制相关文章
相似问题