我正在开发 jQuery 验证插件。首先点击提交,它会验证第一个表单并显示自定义错误消息,一旦输入值,如果我点击提交,它会隐藏第一个表单并显示第二个表单。
这是我的 HTML 代码
<form id="form1" method="post">
<div id="div_form1">
<input type = "text" id="txt_fname" name="txt_fname"/>
<select id="opt_sel" name="kindly select the value">
<option>
Select
</option>
<option>
Bananana
</option>
</select>
<button id="btn_form">Submit</button>
</div>
<div id="div_form2">
<input type = "text" id="txt_lname" name="txt_lname"/>
<select id="opt_sel" name="kindly select the value">
<option>
Select
</option>
<option>
Bananana
</option>
</select>
<button id="btn_form1">Submit</button>
</div>
</form>
<form id="form2" name="form2" method="post">
<div id="div_form3">
<input type = "text" id="txt_mname" name="txt_mname" />
<button id="btn_form3">Submit</button>
</div>
</form>
CSS
.error_field{
background-color:red;
color:black;
border:1px solid red;
}
j查询
$("#div_form2").hide();
$("#div_form3").hide();
$("#form1,").validate({
rules:{
txt_fname:{
required:true
}
},
messages :{
txt_fname:"Fill this field"
}
});
使用此代码,第二个表单被隐藏,第一个表单得到验证,但选项选择字段未验证:(一旦输入值或输入它就没有提交,也没有显示 form2。请帮助我,因为我是新手对于 jquery,我在这里很挣扎
这是 fiddle Link
提前致谢。
感谢和问候 马哈德万
最佳答案
您可以为 Select 添加自定义 Angular 色验证并添加 submissionHandler。
$.validator.addMethod("valueNotEquals", function(value, element, arg){
return arg != value;
}, "Value must not equal arg.");
$("#div_form3").hide();
$("#form1").validate({
rules:{
txt_fname:{
required:true
},
txt_lname:{
required:true
},
kindlyselectthevalue: { valueNotEquals: "default" }
},
messages :{
txt_fname:"Fill this f_Name",
txt_lname:"Fill this l_Name",
kindlyselectthevalue:"Fill this select"
},
submitHandler: function(form) {
$("#form1").hide();
$("#div_form3").show();
}
});
关于javascript - 使用带有表单的 jquery 进行自定义验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31903479/