Question

目前正在进行表单验证，我需要选择使用Jquery UI日期选择器的日期，我需要使用带有jQuery验证的jQuery验证日期，单选按钮和选项下拉列表。目前我尝试验证所有文本字段。但我没有得到如何验证选项下拉，广播和日期。当我尝试使用正常验证验证日期选择器时，将所需的txt_dob作为字段名称，它工作正常，但是当我从日期选择器中选择日期时，CSS未被删除。

请告诉我该怎么做或请提供一些样品

这是我的HTML代码

<form autocomplete="off" class="basicForm" id="basicForm" method="POST" action="">
<input type="text" class="ipt_Field" id="txt_Fname" name="txt_Fname" placeholder="First Name" /> 
<input type="text" class="ipt_Field" id="txt_Mname" name="txt_Mname" placeholder="Middle Name"/>
<input type="text" class="ipt_Field" id="txt_Gname" name="txt_Gname" placeholder="Grandfather's Name"/>
<br>
<input type="radio" name="sex" id="rad_m" value="male" checked>
<label class="radio-label">Male</label>
<input type="radio" name="sex" id="rad_f" value="female">
<label class="radio-label">Female</label>
<select id="sel_ms" class="slt_Field">
    <option>Please Select</option>
    <option value="D">Divorced</option>
    <option value="M">Married</option>
    <option value="S" selected='selected'>Single</option>
    <option value="U">Unspecified</option>
    <option value="W">Widowed</option>
</select>
<label><span class="text-error-black">*</span>Date of Birth</label>
<br/>
<div class="input-group">
    <input type="text" placeholder="MM/DD/YYYY" class="ipt_Field" id="txt_dob" name="txt_dob" />
    <input type="text" placeholder="MM/DD/YYYY" class="ipt_Field" id="txt_iDate" name="txt_dob" />
    <span class="form-control-feedback"><i class="fa fa-calendar"></i></span>
</div>
<button class="btn-next" id="btn-Next" >Next</button>

以下是Fiddle link

Answer 1

我没有得到如何验证选项下拉列表，广播和日期

您尚未为type="radio"或select元素指定验证规则。如果您要对其进行验证，则select需要name属性。

即便如此，您已通过errorPlacement选项将其打破。

errorPlacement: function (error, element) {
    var n = element.attr("name");
    if (n == "txt_Fname") element.attr("placeholder", "Please enter first name");
    else if (n == "txt_lname") element.attr("placeholder", "Please enter last name");
    else if (n == "txt_Mfname") element.attr("placeholder", "Please enter Mother's Maiden first name");
    else if (n == "txt_Mlname") element.attr("placeholder", "Please enter Mother's Maiden last name");
    else if (n == "txt_Pptnum") element.attr("placeholder", "Please enter your email address");
    else if (n == "txt_Pi") element.attr("placeholder", "Please enter your Place of Issue");
},

您正在使用placeholder属性来显示错误消息，并且由于placeholder或radio元素没有select属性，因此不会显示任何错误消息。< / p>

此外，您的整个errorPlacement概念过于冗长，所有条件都可以简单地替换为一行......

errorPlacement: function (error, element) {
    element.attr("placeholder", error.text());
},

然后，自定义错误消息只包含在messages选项...

中

messages: {
    txt_Fname: "Please enter first name",
    ....
}

您的表单加载了已经检查过的广播，因此任何验证规则都会提前得到满足，并且验证插件没有任何标记。
您的表单加载时已选择option，因此任何验证规则都会提前得到满足，并且验证插件无需标记。
您必须在第一个value=""元素上option。
您的两个日期输入字段都具有相同的name。您必须在每个插件上使用唯一的name或插件无法区分它们。
您已声明HTML标记中不存在的字段名称规则，相反，您有input个字段未声明任何规则。

DEMO：http://jsfiddle.net/xgLj3r32/1/

此演示修复了您的基本错误。但是，如果您要将placeholder属性用于错误消息，那么您需要重新编写errorPlacement函数，以便有条件地为广播和select元素执行其他操作

当我尝试使用正常验证验证日期选择器时，将所需的txt_dob作为字段名称，它工作正常，但是当我从日期选择器中选择日期时，CSS未被删除。

由于插件不捕获与日期选择器关联的任何事件，因此您需要编写一个change处理程序，当文本字段的值发生更改时，该处理程序会以编程方式触发验证。

$('[name="txt_dob2"]').on('change', function() {
    $(this).valid();
});

http://jsfiddle.net/xgLj3r32/2/

使用jquery验证对jquery datepicker radio和select字段进行表单验证

1 个答案: