私は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();
});
また、これはjsfiddle.net リンク