我一直在努力使用这个jQuery Validation Plugin.这是代码:
<script type="text/javascript">
$(function() {
var validator = $('#signup').validate({
errorElement: 'span',
rules: {
username: {
required: true,
minlenght: 6
//remote: "check-username.php"
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
agree: "required"
},
messages: {
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 6 characters"
//remote: "Somenoe have already chosen nick like this."
},
password: { …我假设我需要一个正则表达式？
我有一个邮政编码字段,邮政编码必须在芝加哥的城市范围内.幸运的是,所有的邮政编码都以606开头.所以我需要轮询输入以确保输入的邮政编码是5位数,并以数字606开头:
我的输入很基本:
<label for="dzip"><span class="red">♥ </span>Zip:</label>
<input name="attributes[address_zip]" id="dzip" type="text" size="30" class="required zip-code" />
然后我的城市脚本很容易.我只需要将它应用于邮政编码:
jQuery.validator.addMethod("Chicago", function(value) {
return value == "Chicago";
}, '**Recipient must reside in Chicago City Limits**');
如果我展示插件如何用于电话号码(美国),可能会有所帮助.基本上我需要把它翻译成拉链:
jQuery.validator.addMethod("phoneUS", function(phone_number, element) {
phone_number = phone_number.replace(/\s+/g, "");
return this.optional(element) || phone_number.length > 9 && phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
}, "Please specify a valid phone number");
这部分的意思是什么？
phone_number.replace(/\s+/g, "")
我直接从验证网站上的示例中删除了手机部分.
这里所有伟大(和快速)输入的最终答案是:
jQuery.validator.addMethod("zip-code", function(zip_code, element) {
zip_code = zip_code.replace(/\s+/g, "");
return this.optional(element) || zip_code.length == 5 && zip_code.match(^606[0-9]{2}$);
}, "Please specify a City …Ello堆栈,Cant似乎弄清楚为什么在验证字段后我的div中没有显示任何文本.这是我的代码.我知道验证正在运行但是,我不确定为什么我的验证消息没有显示在div中.
<html>
<head>
<script src="Scripts/jquery-1.5.2.js" type="text/javascript"></script>
<script src="http://localhost:62147/Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
"use strict";
$(document).ready(function () {
$("#testerbtn").bind("click", function () {
alert("onclick is fired");
$("#myform").validate({
errorLabelContainer: $("#Errors"),
rules: {
textToVal: { required: true }
},
messages: {
textToVal: "the field is required! nub~!"
}
});
alert("validation should have happend.");
})
});
</script>
<title>Test Page</title>
</head>
<body>
<form id = "myform" action="htmlPage1.htm">
<div id="Errors"></div>
<div>
<input type="text" id="textToVal" value="" />
<input type="button" id="testerbtn" value="Tester" />
</div>
</form>
</body>
</html>
使用jQuery验证,如果我在页面上有很多字段,并且只需要填充其中一个字段,那么只有在它们全部为空时才会引发错误.
也就是说,用户可以填充一个或多个字段,但如果所有字段都是空白,则会出现错误.我想知道是否有一种方法可以使用jQuery验证.
我正在使用jQuery Mobile和jQuery验证并且无法使其工作.到目前为止,这是我的代码.
$('#submit').on('click', function() {
$("#page2 form").validate({
rules: {
firstName: "required",
lastName: "required"
},
});
});
这不起作用.我也尝试过只是通过包含没有点击事件的验证,这也不起作用.想法？
更新:如果有人看到这个,代码很好,我的标记有错误.尽管如此,Sparky仍然是一个很好的答案.
我有一个包含多个地址字段的表单.如果前一个字段已经填写,我想只允许在一个字段中输入.我正在使用jquery validate,并希望继续这样做.我们的想法是,虽然除了第一个领域之外,实际上并不需要这些领域,但你不能在其余领域留下空白.因此,如果字段3为空,则您不能在字段4中包含数据.一种方法可能是仅在将数据输入上一个字段时启用字段,但不确定如何在此上下文中执行此操作.
当我通过它时,这可能会变成多个问题,但我需要一些严肃的JQuery帮助.我基于bassistance.de的例子创建了一个多部分表单.在该演示中,验证非常简单 - 使用类指定必需的字段,迭代并从表单元素标题中提取错误消息.
我的表单比演示更复杂 - 我在这个实例中实现验证.例如,在演示中,错误正好在表单元素之后.在我的情况下,我想指定我想要验证的字段,创建规则并根据它们是否是错误指定我想在类中放置错误的位置.我正在使用Blueprint CSS框架,它已经有为这些东西构建的类,但正如我所说,我无法弄清楚如何使这项工作.
理想情况下,我希望能够在演示中更改验证方法并替换我更熟悉的方法 - 例如:
$("#theForm").validate({
errorPlacement: function(error, element) {
if(element.attr("name") === "name") {
error.appendTo("#nameError");
}
},
groups: {
capacityGroup: "progMin progMax",
},
rules: {
fName: "required",
},
messages: {
fName: "*First Name is required",
}
});
所以,我当然希望有人可以帮忙解决这个问题.我在www.43rdworld.com/multitest.htm上传了一个略有不同的演示,其中添加了一个错误消息div和样式表.我真的想改变表单的验证方式,以便它在提交之前仍然可以在页面之间进行验证,但是让我指定必填字段,编写自己的规则和消息,并指定这些消息的显示位置.
我正在尝试使用jQuery Validation插件验证我的表单.
这是代码
$(document).ready(function(){
var productsForm=$('#products-form');
productsForm.validate({
//debug:true,
invalidHandler: function(event, validator) {
// 'this' refers to the form
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors == 1
? 'You missed 1 field. It has been highlighted'
: 'You missed ' + errors + ' fields. They have been highlighted';
$("div.error span").html(message);
$("div.error").show();
} else {
$("div.error").hide();
}
},
rules:{
productName: {
required: true,
minlength:2,
//here i tried to create a function
onfocusout: function(element){
var myValue=$(element).val();
if(myValue.match(/[<>$]/)) …我对jquery不太满意,因此需要你的帮助.
我有一个表单,其中有两个字段"origin"和"destination".所以我在两个字段中使用jquery自动完成.
$('#form1_origin,#form1_destination').autocomplete({
lookup: countriesArray,
minChars: 0,
});
它工作得很好但是当我尝试使用jquery验证插件验证这些字段时,我遇到了一些问题.
这是代码: -
$('#form_1').validate({
errorClass: "airError",
focusInvalid: true,
success: function(element){
$(element).closest('.airError').removeClass('.airError');
},
errorPlacement: function(error,element){
if(element.attr("name") === "form1_infant" || element.attr("name") === "form1_departure"){
error.insertAfter('#showErrors');
}else{
error.insertAfter(element);
}
},
rules: {
form1_origin: {
validSelectionOrigin: true,
},
form1_destination:{
validSelectionDestination: true,
compare_origin_dest: true
},
// rules for rest of the fields
},
});
问题:-
我很确定jquery会验证onkeyup上的字段.所以,如果我TYPE在此字段中的值,它工作正常,但是当我选择从自动完成列表中的值,它不验证领域,因为我仍然可以看到正在显示的错误.那么我能做些什么来使它适用于两者？
我有以下bootstrap下拉菜单:
<div class="form-group">
<label for="name" class="col-md-3 control-label">Pens</label>
<div class="col-md-9">
<div class="btn-group btn-input">
<button id="pensList" type="button"
class="btn btn-default dropdown-toggle form-control"
data-toggle="dropdown">
<span data-bind="label">Nothing selected</span>
<span class="caret"></span>
</button>
<ul id="elements" class="dropdown-menu">
<li id="my_li_id_0"><a href="#">Nothing selected</a></li>
<li id="my_li_id_1"><a href="#">Ballpoint Pens</a></li>
<li id="my_li_id_2"><a href="#">Rollerball Pens</a></li>
<li id="my_li_id_3"><a href="#">Fountain Pens</a></li>
<li id="my_li_id_4"><a href="#">Custom pens</a></li>
</ul>
</div>
</div>
</div>
这个脚本让它下拉:
$(document.body).on('click', '.dropdown-menu li',
function(event) {
var $target = $(event.currentTarget);
$target.closest('.btn-group').find(
'[data-bind="label"]').text(
$target.text()).end().children('.dropdown-toggle').dropdown('toggle');
return false;
});
如何对其应用jquery 验证,在id为my_li_id_0的元素上引发错误？
jquery jquery-validate twitter-bootstrap drop-down-menu twitter-bootstrap-3
jquery-validate ×10
jquery ×9
javascript ×2
autocomplete ×1
html ×1
jquery-ui ×1
validation ×1