将Jquery脚本与AJAX结合

Question

我正在尝试将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('&nbsp;<strong>*</strong>&nbsp;');

    // 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" />

Answer 1

我对制作Wordpress插件和Wordpress标记一无所知，但看来您可以处理这种情况，但可以在表单验证时让验证程序使用Ajax提交表单。

因此，您需要删除onclick="tdomfSubmit%%FORMID%%('post');而是让验证插件触发它，只有在允许回调参数的情况下，才有可能。

另一种可能是在单击提交按钮和表单提交事件上的ajax时绑定验证。 click事件首先发生，并且只有在返回true时，表单才会提交，submit事件也会发生。 那就是导致您的问题的原因。