Jquery 验证 - 需要至少 2 个字段中的 1 个填充默认文本以外的任何内容
Jquery validate - needing at least 1 of 2 fields populated with anything other than default text
我有一个html联系表单,每个字段中都有默认值 - 即。"名字"(其中我使用 clearfield.js以便当用户单击时值消失)
我有 2 个字段必须填写,还有 2 个字段必须填写其中任何一个。当然,所有字段都已识别为已填充,因为它们都具有默认值。我已经通过使用 validator.addMethod 忽略默认短语来解决这个问题。
我还设法调整了验证,以允许使用 validator.addMethod 填写 2 个字段中的至少 1 个,但前提是我去掉默认值。
当我存在默认值并且我希望至少填写 2 个字段中的 1 个时,会出现我的问题。我无法弄清楚如何让验证识别何时/如果至少一个字段具有唯一的非默认值。
我在下面包含了我的代码。
我不是jquery/javascript的专家,所以希望有一个简单的解决方案。
<script type="text/javascript">
$(document).ready(function() {
jQuery.validator.addMethod("notEqual", function(value, element, param) {
return this.optional(element) || value != param;
}, "This field is required.");
jQuery.validator.addMethod("require_from_group", function (value, element, options) {
var numberRequired = options[0];
var selector = options[1];
var fields = $(selector, element.form);
var filled_fields = fields.filter(function () {
return $(this).val() != "";
});
var empty_fields = fields.not(filled_fields);
if (filled_fields.length < numberRequired && empty_fields[0] == element) {
return false;
}
return true;
}, jQuery.format("Please enter either a phone number or email address."));
$("#contact-form").validate({
groups: {
names: "phone email"
},
rules: {
fname: {
required: true,
notEqual: "First name*"
},
lname: {
required: true,
notEqual: "Last name*"
},
phone: {
require_from_group: [1, ".phoneEmail"]
},
email: {
require_from_group: [1, ".phoneEmail"]
},
}
});
});
jQuery.extend(jQuery.validator.messages, {
require_from_group: jQuery.format("'Please enter either username/ email address to recover password'/Please fill out at least {0} of these fields.")
});
<form id="contact-form" method="post" action="contact-submitted.php" >
<input type="text" class="clearField" name="fname" id="fnameField" value="First name*" />
<input type="text" class="clearField" name="lname" id="lnameField" value="Last name*" />
<input type="text" class="hidden" name="subject" id="subjectField" />
<input type="text" class="clearField phoneEmail" name="phone" id="phoneField" value="Phone number*" />
<input type="text" class="clearField phoneEmail" name="email" id="emailField" value="Email" />
<textarea name="message" class="clearField" id="messageField">Your message</textarea>
<span class="required-field">*required field</span>
<input type="submit" id="contact-submit" value="Start planning now" />
</form>
尝试使用 decaultValue 属性
jQuery.validator.addMethod("require_from_group", function (value, element, options) {
var numberRequired = options[0];
var selector = options[1];
var fields = $(selector, element.form);
var filled_fields = fields.filter(function () {
return $(this).val() != this.defaultValue;
});
if (filled_fields.length < numberRequired && filled_fields.index(element) == -1) {
return false;
}
return true;
}, jQuery.format("Please enter either a phone number or email address."));
演示:小提琴
为了检查电子邮件或电话号码的唯一性,您需要在填写字段后立即进行Ajax呼叫。
相关文章:
- 如何设置html元素填充的动画
- 使用 ajax 填充选择时没有选定的默认选项的问题
- 用默认值填充数组的方法
- 如何使用 Ext-JS 中的默认值填充 ItemSeclector 中的“选定”列
- Highcharts 图形默认系列填充颜色覆盖状态填充颜色(包括 jsfiddle)
- Jquery 验证 - 需要至少 2 个字段中的 1 个填充默认文本以外的任何内容
- 为已由数据库信息填充的下拉列表设置默认值.MVC 4.
- 在此脚本中填充默认值的位置
- 如何从引导程序导航栏中删除默认填充
- 如何使我的选项成为默认选项,以便如果我清除下拉列表,它将由默认选项填充
- 如何使用角度 js 将选择下拉列表中的值填充为默认值
- 如何使用默认值填充文本字段或将其保留为空,所有这些都取决于下拉列表中的选择
- JavaScript在模糊时将默认值填充回文本字段
- 向表中添加新列时,用默认单元格填充当前行
- 在使用Ajax填充下拉框时设置默认值
- 如何定义HTML表单元素的默认值而不填充字段
- Javascript:从默认对象中填充对象的未发现属性
- 使用默认值填充多维javascript数组矩阵
- 如何删除flexbox默认填充/边距/页面边距
- jQuery用默认值填充空文本输入