使用jquery验证对jquery datepicker单选和选择字段进行表单验证

目前正在进行表单验证，我需要选择使用Jquery UI日期选择器的日期，我需要使用Jquery和Jquery验证来验证日期、单选按钮和选项下拉列表。目前，我正在尝试验证所有文本字段。但我不知道如何验证选项下拉列表、收音机和日期。当我尝试使用正常验证验证来验证日期选择器时，将required

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>

男性的
女的
请选择
离异
已婚的
仅有一个的
未指明
寡居的
*出生日期


下一个

这是你的电话号码

我不知道如何验证选项下拉列表、收音机和日期

您没有为

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");
},

您正在对错误消息使用

占位符

属性，由于

收音机

或

选择

元素没有

占位符

属性，因此无法显示错误消息

此外，您的整个

errorPlacement

概念过于冗长，所有条件都可以简单地用一行替换

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

然后，自定义错误消息只包含在

messages

选项中

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

您的表单加载了一个已经检查过的收音机，因此任何验证规则都会提前得到满足，并且验证插件不会标记任何内容

您的表单加载时已经选择了一个

选项

，因此任何验证规则都会提前得到满足，并且验证插件不会标记任何内容

您必须在第一个

选项

元素上具有

value=”“

两个日期输入字段的名称相同。您必须在每个插件上使用唯一的

名称

，否则插件无法区分它们

您对HTML标记中不存在的字段名声明了规则，相反，您的

input

字段没有声明任何规则

演示：

此演示修复了您的基本错误。但是，如果要对错误消息使用

占位符

属性，则需要重新编写

errorPlacement

函数，以便有条件地对收音机和

元素执行其他操作


当我尝试用普通的验证来验证日期选择器时，将所需的txt_dob作为字段名，效果很好，但当我从日期选择器中选择日期时，CSS没有被删除

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

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

请编辑您的OP以包含相关的jQuery代码。当JSFIDLE失效时，这个问题对未来的读者来说是无用的。