2
我试图添加一个JQuery的验证脚本到wordpress的表单插件。该插件是用Ajax编写的，虽然它确实可以验证输入字段，但它不是很漂亮。这就是为什么我想在Ajax将数据传递到数据库之前使用Jquery验证字段。结合JQuery脚本与AJAX
我需要做的是这样的：当用户点击提交时，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" />
WordPress插件如何工作？ – Jeremy 2010-03-25 12:25:41
没有像“Ajax”这样的编程语言;没有什么是“用Ajax编写的”。 – Pointy 2010-03-25 12:27:00
对不起 - 点好。我不是开发者...... – Thomas 2010-03-25 12:27:55