我使用 jQuery 表单验证插件这个插件来验证我的表单和工具提示器以显示错误消息。
验证表单并显示错误的代码没有问题，当我在错误消息出现后显示一些隐藏的表单元素时，唯一的问题出现了。
因此，如果我在显示隐藏元素（与用户选择动态相关）后提交表单，则错误消息放置没有问题。
但是如果提交的表单和用户选择在错误消息出现后显示隐藏元素，则错误位置出错。
HTML
<form id="eway" method="post" action="" ENCTYPE="multipart/form-data">
<div class="roww">
<select name="txtAmount" id="txtAmount" class="inputfield select" >
<option value="Amount">Select Amount</option>
<option value="5">$5</option>
<option value="10">$10</option>
<option value="15">$15</option>
<option value="25">$25</option>
<option value="50">$50</option>
<option value="70">$75</option>
<option value="100">$100</option>
<option value="Custom">Custom Amount</option>
</select>
</div>
<div id="customAmount" style="display: none;">
<div class="roww">
<input name="txtCustomAmount" type="text" id="txtCustomAmount" class="inputfield" placeholder="Please enter amount more than $1"/>
</div>
</div>
<div class="roww">
<input name="txtLastName" type="text" id="txtLastName" class="inputfield" placeholder="Please enter your last name"/> </div>
<div class="roww"><input name="txtMobileNumber" type="text" id="txtMobileNumber" class="inputfield" placeholder="Please enter your mobile number"/></div>
<input type="submit" name="btnProcess" value="Process Transaction" id="btnProcess" class="go backcolr"/>
<form>
CSS
<style>
.cont
{
/*width:400px; height:470px; float:left; */
}
.roww
{
width:445px; height:auto; float:left; margin:5px 0;
}
.firts
{
width:180px; height:30px; float:left; font-weight:bold;
}
.second
{
width:210px; height:30px; float:left;
}
. firts span
{
width:5px; height:25px; float:left; font-weight:bold; color:#F00
}
.showerror {border:1px solid #CE2726; padding:10px 15px; background:#FDE8E7; margin:5px 0 15px 0px; width:auto; color:#CE2726; ont-family: 'Ubuntu',sans-serif; font-size: 16px; font-weight: normal;}
.showsuccess {border:1px solid #ACDBAD; padding:10px 15px; background:#ECFAE3; margin:5px 0 15px 0px; width:auto; color:#4F8A10; ont-family: 'Ubuntu',sans-serif; font-size: 16px; font-weight: normal;}
.go {
border: medium none;
border-radius: 3px 3px 3px 3px;
color: #FFFFFF;
cursor: pointer;
font-family: 'Ubuntu',sans-serif;
font-size: 14px;
font-weight: bold;
padding: 6px 10px;
margin:0 0 0 0;
float:right;
}
.inputfield {
border: 1px solid #CBCBCB;
border-radius: 3px 3px 3px 3px;
box-shadow: 1px 1px 4px #E5E4E4 inset;
color: #666666;
float: left;
height: 32px;
line-height: 32px;
margin-bottom: 15px;
padding: 0 15px;
width: 240px;
}
.select { padding:6px 10px; width: 270px;}
.clear { clear:both;}
</style>
和 JS
$("#txtAmount").change(function(){
var val = $(this).val();
if(val == 'Custom'){
$("#customAmount").fadeIn();
}else{
$("#customAmount").fadeOut();
}
});
$('#txtAmount').tooltipster({
trigger: 'custom',
onlyOne: false,
position: 'right'
});
$('#eway input[type="text"]').tooltipster({
trigger: 'custom',
onlyOne: false,
position: 'right'
});
$.validator.addMethod("valueNotEquals", function(value, element, arg){
return arg != value;
}, "Value must not equal arg.");
(function($,W,D)
{
var JQUERY4U = {};
JQUERY4U.UTIL =
{
setupFormValidation: function()
{
//form validation rules
$("#eway").validate({
errorPlacement: function (error, element) {
$(element).tooltipster('update', $(error).text());
$(element).tooltipster('show');
},
rules: {
txtLastName: "required",
txtMobileNumber: "required",
txtAmount: {
valueNotEquals: "Amount"
}
},
messages: {
txtLastName: "Please enter your lastname",
txtMobileNumber: "Please enter a valid mobile number",
txtAmount: "please choose donation amount"
},
submitHandler: function(form) {
$.ajax({
url: form.action,
type: form.method,
data: $(form).serialize(),
async: false,
dataType: 'json',
beforeSend : function (){
$('#loading').show();
},
success: function(response) {
var status = response.status;
var message = response.message;
$('#loading').hide();
if(status == 1){
$('#error').hide();
$('#result').show();
$('#result').html(message);
resetForm($('#eway'));
}else{
$('#result').hide();
$('#error').show();
$('#error').html(message);
}
}
});
}
});
}
}
$(D).ready(function($) {
JQUERY4U.UTIL.setupFormValidation();
});
})(jQuery, window, document);
$('#eway').submit(function(e) {
e.preventDefault();
});