我在发送ajax请求之前尝试使用jQuery验证引擎验证我的表单。但是如果表单包含错误,ajax也会发送请求。
JavaScript的:
$('#addphrase').validationEngine('attach', {
inlineValidation: false,
promptPosition: "centerRight",
onSuccess: function () {
use_ajax = true;
alert(dcd);
},
onFailure: function () {
use_ajax = false;
alert(ggg);
}
});
$('form[name="addphrase"]').submit(function (e) {
if (use_ajax) {
$('#loading1').css('visibility', 'visible');
$.get('addphrase.php', $(this).serialize() + '&ajax=1',
function (data) {
if (parseInt(data) == -1) {
$("#resp1").show('slow').after('<p id="resp-mes1" style=" color:#000000; text-decoration: bold;">* Please ensure all fields are filled.","error"</p>');
} else {
$("#resp1").show('slow').after('<p id="resp-mes1" style=" color:#000000; text-decoration: bold;">Added successfully. Thank You...</p>');
}
$('#loading1').css('visibility', 'hidden');
setTimeout("jQuery('#resp1').hide('slow');", 3000);
setTimeout("jQuery('#resp-mes1').hide('slow');", 5000);
});
}
e.preventDefault();
}
});
修改 HTML
<form class="form-horizontal" id="addphrase" name="addphrase" method="GET" action="">
<div class="control-group"><label class="control-label" for="form-field-1">Phrase</label>
<div class="controls">
<input type="text" id="phrase" class="validate[required]" placeholder="Phrase" name="Phrase" value="" /></div></div>
<div class="control-group"><label class="control-label" for="form-field-11">Content Here</label>
<div class="controls">
<textarea name="post_content" value="" class="validate[required] autosize-transition span12" id="comment" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 67px;"></textarea></div></div>
<div class="space-4"></div><div class="control-group" style="float:left; margin-right:25px"><div class="controls">
<button type="submit" class="btn btn-info">
<i class="icon-ok bigger-110"></i>
<input type="submit" value="" id="phsubmit" style="opacity:0">Submit</button>
<button type="reset" class="btn"><i class="icon-undo bigger-110"></i>Reset</button></div></div>
<div id="resp1" style="float:left; margin-top:5px"><img id="loading1" style="visibility:hidden;" src="assets/img/ajax-load.gif" width="16" height="16" alt="loading" /></div></div>
</form>
在上面的代码中,如果失败或成功,它将不会显示警告,也不会附加属性。
任何帮助都将不胜感激。
答案 0 :(得分:1)
尝试使用onValidationComplete
之类的,
$('#addphrase').validationEngine('attach', {
inlineValidation: false,
promptPosition: "centerRight",
onValidationComplete: function (form, status) {
if (status) {
alert('Form submit');
$('#loading1').css('visibility', 'visible');
$.get('addphrase.php', $(this).serialize() + '&ajax=1',
function (data) {
if (parseInt(data) == -1) {
$("#resp1").show('slow').after('<p id="resp-mes1" style=" color:#000000; text-decoration: bold;">* Please ensure all fields are filled.","error"</p>');
} else {
$("#resp1").show('slow').after('<p id="resp-mes1" style=" color:#000000; text-decoration: bold;">Added successfully. Thank You...</p>');
}
$('#loading1').css('visibility', 'hidden');
setTimeout("jQuery('#resp1').hide('slow');", 3000);
setTimeout("jQuery('#resp-mes1').hide('slow');", 5000);
});
}
else
{
alert('Error');
}
},
});
阅读Docs
<强> Demo 强>