javascript - 将 Jquery 脚本与 AJAX 相结合

Question

我正在尝试将 Jquery 验证脚本添加到 wordpress 的表单插件中。该插件是用 Ajax 编写的，虽然它确实验证了输入字段，但它不是很漂亮。这就是为什么我试图在 Ajax 将数据移交给数据库之前使用 Jquery 来验证字段。

我需要做的是:当用户点击提交时，Jquery 验证输入字段，然后如果字段已正确填写，则触发原始插件 Ajax 脚本，提交数据。如果 Jquery 未能验证所有必填字段，则不会触发 Ajax 并提示用户更正他们错过的字段。

实际情况:两个脚本同时触发。 ajax 开始提交数据，即使 Jquery 在用户未能填写的字段旁边显示了红色错误消息。

我似乎无法找到一种方法让 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'); 并让验证插件触发它。这只有在它允许回调参数。

另一种可能性是将验证绑定(bind)到单击提交按钮和表单提交事件上的 ajax。单击事件首先发生，只有当它返回 true 时，表单才会提交，提交事件才会发生。这就是导致您出现问题的原因。