我正在尝试在发送 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>
在上面的代码中,它不会显示警报,也不会附加属性,无论是失败还是成功。
任何帮助,将不胜感激。