Combine Jquery script with AJAX

Question

Im trying to add a Jquery validation script to a form plugin for wordpress. The plugin is written in Ajax and while it does validate the input fields, its not very pretty. That is why I am trying to use Jquery to validate the fields before Ajax hands the data over to the database.

What I need to happen is this: When a user clicks submit, the Jquery validates the input fields and then if the fields have been properly filled-out the original plugin Ajax script is triggered, submiting the data. If the Jquery fails to validate all of the required fields, than they Ajax is not triggered and the user is prompted to correct the fields they missed.

What is actually happening: Both of the scripts are triggered at the same time. The ajax begins to submit the data even though the Jquery has put up red error messages next to fields that the user failed to fill out.

I can't seem to find a way to get the Jquery script to trigger the Ajax function on successful submit and prevent the form from submitting in the case that the form hasn't been successfully validated.

Here is the documentation for the Jquery validation plugin: http://docs.jquery.com/Plugins/Validation

The function that controls what happens when the user submits a successfully validated form looks like this:

var v = $("#tdomf_form%%FORMID%%").validate({
        errorClass: "warning",
        onkeyup: false,
        onblur: false,
        submitHandler: function() {
        form.submit();
        }

Here are the two scripts I am working with:

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

Edit: Here is the Submit button code:

<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

I don't really know anything about making Wordpress plugins and wordpress markup, but it seems you can handle this case, but letting the validator submit the form with ajax when the form validates.

So you would need to remove the onclick="tdomfSubmit%%FORMID%%('post'); and instead let the validation plugin trigger it. This would only be possible if it allows a callback parameter.

Another possibility could be to bind the validation on click on the submit buttom and the ajax on the forms submit event. The click event happens first and only if it returns true, will the form submit and the submit event will happen. That is what is causing your problem.