Javascript DIV 上的 jQuery 验证插件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4936221/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery validate plugin on DIV
提问by JohnIdol
I am trying to use the validate pluginon a div as shown in the answer to this question:
我正在尝试在 div 上使用验证插件，如对这个问题的回答所示：
<script type="text/javascript">
$("#pseudoForm").validate({
onfocusout:true,
rules:{
first_name:"required",
last_name:"required"
}
});
</script>
<!-- whatever -->
<div id="pseudoForm">
<input type="text" name="first_name"/>
<input type="text" name="last_name"/>
</div>
I have all within a form.
我所有的都在一个表格中。
I am getting a bunch of different errors on different browsers.
我在不同的浏览器上收到一堆不同的错误。
- Firefox: validator in undefined
- IE8: 'settings' is null or not an object
- Chrome: Cannot read property 'settings' of undefined
- Firefox：未定义的验证器
- IE8：“设置”为空或不是对象
- Chrome：无法读取未定义的属性“设置”
Any help appreciated!
任何帮助表示赞赏！
回答by Nick Craver
This isn't the answer you want to hear, but the other answer is incorrect (it may have been right when it was posted, but there have been several major jQuery validation plugin changes since then).
这不是您想听到的答案，但另一个答案是不正确的（发布时可能是正确的，但自那时以来，jQuery 验证插件发生了几项主要更改）。
The validation pluginis (currently) designed to work on a <form>, and onlyon a <form>. You can also note that all of the plugin documentationreferences a form, not any other generic container.
验证插件（目前）被设计为适用于<form>，并且仅适用于<form>. 您还可以注意到所有插件文档都引用了一个表单，而不是任何其他通用容器。
The plugin itself keeps track of validator.currentForminternally, which refers to the thisof the passed in selector, getting .elements, etc off that...it's really not going to work any other way, not the way the current version's written.
插件本身在validator.currentForm内部跟踪，它指this的是传入的选择器、获取.elements等的 ......它真的不会以任何其他方式工作，而不是当前版本的编写方式。
The overall solution/alternative approach here:call .validate()on the <form>element (the jQuery wrapper for it rather) directly, not any other container. If you need to divide your <form>use <fieldset>elements, possibly using the ignore: ':hidden'option in .validate()if you don't want to validate input fields that aren't visible to the user.
总体溶液/替换的方法在这里：呼叫.validate()的上<form>元件（jQuery的包装为它相当）直接，没有任何其它容器。如果您需要划分您的<form>使用<fieldset>元素，如果您不想验证用户不可见的输入字段，则可能使用中的ignore: ':hidden'选项.validate()。
回答by treeface
You're missing a closing bracket. Try this instead:
你缺少一个右括号。试试这个：
$("#pseudoForm").validate({
onfocusout:true,
rules:{
first_name:"required",
last_name:"required"
}
});
回答by tomas.satinsky
You can get the same error if you select the form by class
如果按类选择表单，则可能会出现相同的错误
$(".form_class").validate(...
$(".form_class").validate(...
instead of by ID
$("#form_id").validate(...
而不是通过 ID
$("#form_id").validate(...
or tag name
$("form").validate(...
或标签名称
$("form").validate(...
回答by Rushabh Jariwala
Open jquery.validate.jsor jquery.validate.min.jsand find(ctrl + F) "label" and replaceAllwith your your required tag:
打开jquery.validate.js或jquery.validate.min.js找到（ctrl + F）“ label”并replaceAll使用您需要的标签：
Example: div
示例：div
then perform validation.
然后进行验证。
回答by Inam Habib
//HTML
<div class="form-group has-feedback col-xs-8 " style="padding-right:0px">
<input type="tel" class="form-control" name="Otp_MobileNo" id="mobileNo" placeholder="Mobile No." minlength="10" maxlength="10">
<span id="mobileno_message" style="display:none;color: red;">Please enter a valid Mobile No</span>
</div>
//Java Script
$("#getOtp").click(function(){
jQuery(document).ready(function(){
var MobileNo = jQuery("#mobileNo").val();
var MobileNoLength = MobileNo.length;
var zipRegex = /^\d{10}$/;
var mobileNo = $("#mobileNo").val();
if (!zipRegex.test(MobileNo))
{
jQuery('#mobileno_message').show();
}
else
{
// success!
jQuery('#mobileno_message').hide();
$.ajax({
type : 'POST',
url : '<?php echo site_url('Login/send_otp'); ?>',
data : {Otp_MobileNo:mobileNo,},
dataType : 'json',
beforeSend: function()
{
$("#error").fadeOut();
},
success : function(response)
{
alert(response.message_text);
$("#check-otp").delay().animate({
height: 'toggle',
},
"slow");
$("#getOtp").hide();
}
});
}
});
});
