我试图将一个Jquery验证脚本添加到wordpress的表单插件中。该插件是用Ajax编写的，虽然它确实验证了输入字段，但它不是很漂亮。这就是为什么我在Ajax将数据传递到数据库之前尝试使用Jquery来验证字段的原因。
我需要做的是：当用户点击提交时，Jquery验证输入字段，然后如果字段已正确填写，则触发原始插件Ajax脚本，提交数据。如果Jquery无法验证所有必需字段，则不会触发Ajax，并提示用户更正错过的字段。
实际发生的事情：两个脚本同时被触发。即使Jquery在用户未能填写的字段旁边放置了红色错误消息，ajax也开始提交数据。
我似乎无法找到一种方法来让Jquery脚本在成功提交时触发Ajax函数，并防止在表单尚未成功验证的情况下提交表单。
以下是Jquery验证插件的文档：http://docs.jquery.com/Plugins/Validation
控制用户提交成功验证表单时发生的情况的函数如下所示：
var v = $("#tdomf_form%%FORMID%%").validate({
errorClass: "warning",
onkeyup: false,
onblur: false,
submitHandler: function() {
form.submit();
}
以下是我正在使用的两个脚本：
<script type="text/javascript">
$(document).ready(function(){
$("#customfields-tf-5-tf").mask("(999) 999-9999");
$("#customfields-tf-11-tf").mask("99%");
// add * to required field labels
$('label.required').append(' <strong>*</strong> ');
// accordion functions
var accordion = $("#stepForm").accordion();
var current = 0;
$.validator.addMethod("pageRequired", function(value, element) {
var $element = $(element)
function match(index) {
return current == index && $(element).parents("#sf" + (index + 1)).length;
}
if (match(0) || match(1) || match(2)) {
return !this.optional(element);
}
return "dependency-mismatch";
}, $.validator.messages.required)
var v = $("#tdomf_form%%FORMID%%").validate({
errorClass: "warning",
onkeyup: false,
onblur: false,
submitHandler: function() {
form.submit();
}
});
// back buttons do not need to run validation
$("#sf2 .prevbutton").click(function(){
accordion.accordion("activate", 0);
current = 0;
});
$("#sf3 .prevbutton").click(function(){
accordion.accordion("activate", 1);
current = 1;
});
// these buttons all run the validation, overridden by specific targets above
$(".open2").click(function() {
if (v.form()) {
accordion.accordion("activate", 2);
current = 2;
}
});
$(".open1").click(function() {
if (v.form()) {
accordion.accordion("activate", 1);
current = 1;
}
});
$(".open0").click(function() {
if (v.form()) {
accordion.accordion("activate", 0);
current = 0;
}
});
});
</script>
<script type="text/javascript">
//<!-- [CDATA[
function ajaxProgressStart%%FORMID%%() {
var w = jQuery('#ajaxProgress%%FORMID%%').width();
var h = jQuery('#ajaxProgress%%FORMID%%').height();
var offset = jQuery('#tdomf_form%%FORMID%%').offset();
var x = offset.left + ((jQuery('#tdomf_form%%FORMID%%').width() - w) / 2);
var y = offset.top + ((jQuery('#tdomf_form%%FORMID%%').height() - h) / 2);
jQuery('#ajaxProgress%%FORMID%%').css({display: 'block', height: h + 'px', width: w + 'px', position: 'absolute', left: x + 'px', top: y + 'px', zIndex: '1000' });
jQuery('#ajaxProgress%%FORMID%%').attr('class','progress');
ajaxShadow%%FORMID%%();
}
function ajaxShadow%%FORMID%%() {
var offset = jQuery('#tdomf_form%%FORMID%%').offset();
var w = jQuery('#tdomf_form%%FORMID%%').width();
var h = jQuery('#tdomf_form%%FORMID%%').height();
jQuery('#shadow%%FORMID%%').css({ width: w + 'px', height: h + 'px', position: 'absolute', left: offset.left + 'px', top: offset.top + 'px' });
jQuery('#shadow%%FORMID%%').css({zIndex: '999', display: 'block'});
jQuery('#shadow%%FORMID%%').fadeTo('fast', 0.2);
}
function ajaxUnshadow%%FORMID%%() {
jQuery('#shadow%%FORMID%%').fadeOut('fast', function() {jQuery('#tdomf_shadow').hide()});
}
function ajaxProgressStop%%FORMID%%() {
jQuery('#ajaxProgress%%FORMID%%').attr('class','hidden');
jQuery('#ajaxProgress%%FORMID%%').hide();
ajaxUnshadow%%FORMID%%();
}
function tdomfSubmit%%FORMID%%(action) {
ajaxProgressStart%%FORMID%%();
var mysack = new sack("http://www.loftist.com/wp-content/plugins/tdo-mini-forms/tdomf-form-ajax.php" );
mysack.execute = 1;
mysack.method = 'POST';
mysack.setVar( "tdomf_action", action );
mysack.setVar( "tdomf_args", jQuery('#tdomf_form%%FORMID%%').serialize());
mysack.onError = function() { alert('TDOMF: ERROR with AJAX request.' )};
mysack.runAJAX();
return true;
}
function tdomfDisplayMessage%%FORMID%%(message, mode) {
if(mode == "full") {
jQuery('#tdomf_form%%FORMID%%_message').attr('class','hidden');
document.getElementById('tdomf_form%%FORMID%%_message').innerHTML = "";
document.tdomf_form%%FORMID%%.innerHTML = message;
jQuery('#tdomf_form%%FORMID%%').focus();
var offset = jQuery('#tdomf_form%%FORMID%%').offset();
window.scrollTo(offset.left,offset.top);
} else if(mode == "preview") {
jQuery('#tdomf_form%%FORMID%%_message').attr('class','tdomf_form_preview');
document.getElementById('tdomf_form%%FORMID%%_message').innerHTML = message;
jQuery('#tdomf_form%%FORMID%%_message').focus();
var offset = jQuery('#tdomf_form%%FORMID%%_message').offset();
window.scrollTo(offset.left,offset.top);
} else {
jQuery('#tdomf_form%%FORMID%%_message').attr('class','tdomf_form_message');
document.getElementById('tdomf_form%%FORMID%%_message').innerHTML = message;
var offset = jQuery('#tdomf_form%%FORMID%%_message').offset();
window.scrollTo(offset.left,offset.top);
jQuery('#tdomf_form%%FORMID%%_message').focus();
}
ajaxProgressStop%%FORMID%%();
}
function tdomfRedirect%%FORMID%%(url) {
//ajaxProgressStop%%FORMID%%();
window.location = url;
}
//]] -->
</script>
编辑：这是提交按钮代码：
<input name="tdomf_form%%FORMID%%_send" type="submit" id="tdomf_form%%FORMID%%_send" value="Send" class="submitbutton" onclick="tdomfSubmit%%FORMID%%('post'); return false;" alt="Submit" title="Submit" />
答案 0 :(得分：1)
我对制作Wordpress插件和wordpress标记一无所知，但似乎你可以处理这种情况，但是当表单验证时，让验证者使用ajax提交表单。
因此您需要删除onclick="tdomfSubmit%%FORMID%%('post');，然后让验证插件触发它。只有在允许回调参数时才可以这样做。
另一种可能性是在点击提交按钮和表单提交事件上的ajax时绑定验证。 click事件首先发生，只有当它返回true时，表单才会提交并且提交事件将发生。这就是造成问题的原因。