jQuery Validation Ajax Submit help

Question

I'm using this jQuery Validation script to submit my form(s), but I need some help tweaking it to display the message, and to show the form again (after submitting)

http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

^^ The Code

http://www.position-relative.net/creation/formValidator/demoSubmit.html

^^ The Demo

If you look at the demo, I'd like it to display the green message and also display the form again (rather than hiding it).. I can't seem to figure out where in the script to change it.. here's the snippet of the JS code which does the ajax submit function:

submitForm: function (caller) {
        if ($.validationEngine.settings.ajaxSubmit) {
            $.ajax({
                type: "POST",
                url: $.validationEngine.settings.ajaxSubmitFile,
                async: true,
                data: $(caller).serialize(),
                beforeSend: function () {

                },
                success: function (data) {
                    if (data == "true") { // EVERYTING IS FINE, SHOW SUCCESS MESSAGE
                        $(caller).css("opacity", 1)
                        $(caller).animate({
                            opacity: 0,
                            height: 0
                        },
                        function () {
                            $(caller).css("display", "none")
                            $(caller).before("<div class='ajaxSubmit'>" + $.validationEngine.settings.ajaxSubmitMessage + "</div>")
                            $.validationEngine.closePrompt(".formError", true)
                            $(".ajaxSubmit").show("slow")
                            if ($.validationEngine.settings.success) { // AJAX SUCCESS, STOP THE LOCATION UPDATE
                                $.validationEngine.settings.success && $.validationEngine.settings.success();
                                return false;
                            }
                        })
                    } else { // HOUSTON WE GOT A PROBLEM (SOMETING IS NOT VALIDATING)
                        data = eval("(" + data + ")");
                        errorNumber = data.jsonValidateReturn.length
                        for (index = 0; index < errorNumber; index++) {
                            fieldId = data.jsonValidateReturn[index][0];
                            promptError = data.jsonValidateReturn[index][1];
                            type = data.jsonValidateReturn[index][2];
                            $.validationEngine.buildPrompt(fieldId, promptError, type);
                        }
                    }
                }
            })
            return true;
        }
        if ($.validationEngine.settings.success) { // AJAX SUCCESS, STOP THE LOCATION UPDATE
            $.validationEngine.settings.success && $.validationEngine.settings.success();
            return true;
        }
        return false;
    },

Colin · Accepted Answer · 2009-09-23 02:00:39Z

1

The updated if statement could look something like:

if (data == "true") { // EVERYTING IS FINE, SHOW SUCCESS MESSAGE
  $(caller).before("<div class='ajaxSubmit'>" + $.validationEngine.settings.ajaxSubmitMessage + "</div>")
  $.validationEngine.closePrompt(".formError", true)
  $(".ajaxSubmit").show("slow")
  if ($.validationEngine.settings.success) { // AJAX SUCCESS, STOP THE LOCATION UPDATE
    $.validationEngine.settings.success && $.validationEngine.settings.success();
    return false;
  }
}

edited Sep 23, 2009 at 2:00

answered Sep 23, 2009 at 1:37

Colin

2,5026 gold badges24 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

SoulieBaby Over a year ago

Hmm I hid that, but the message doesn't show.. Nor does it save... no js errors in FF either, just doesn't do anything..

SoulieBaby Over a year ago

Ahh I got it.. I changed opacity and height to say 1 and the css to display inline.. works like a charm now.. Thank you for your help!! :)

Colin Over a year ago

Oh sorry, in my haste I missed that there is a callback inside the animate function!

hobbs Over a year ago

Remove the animate call, remove the css(display: none) call, and leave the rest of the stuff that had been in the animate callback inline into the place where the animate used to be. You don't need a do-nothing animation :)

user285594 Over a year ago

This is another theory on the fly, i found to minimize spammers, and it works great, plz see example: stackoverflow.com/q/5571353/285594

Collectives™ on Stack Overflow

jQuery Validation Ajax Submit help

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related