Use the invalidHandler function.

$('#change-form')
    .jqTransform()
    .validate({
        invalidHandler: function(form, validator) {
            $("#loading").hide();
        },
        submitHandler: function(form) {
            $(form).ajaxSubmit({
                success: function() {
                    $('#change-form').hide();
                    $('#loading').hide();
                    $('#page-wrap').append("<p class='thanks'>Thanks! Your
request has been sent.</p>")
                }
            });
        }
    });

On Tue, Jul 14, 2009 at 05:28, Joe <hankin....@gmail.com> wrote:

>
> Example - <a href="http://www.marjosilver.co.uk/new-design/form-test/
> css-tricks/<http://www.marjosilver.co.uk/new-design/form-test/%0Acss-tricks/>
> ">Link</a>
>
> I am trying to impliment a form I saw on css-tricks (<a href="http://
> css-tricks.com/video-screencasts/62-advanced-form-styling-
> functionality/<http://css-tricks.com/video-screencasts/62-advanced-form-styling-%0Afunctionality/>
> ">link</a>).
>
> I have noticed though that it can take a few seconds to send and
> subsequently show a success message, and this could mean that people
> click submit too many time while they are waiting. I thought a good
> way around this would be to show a loading/sending gif image when the
> form is submitted which would disappear as soon as the success message
> is displayed.
>
> However, I am having a problem when trying to only display this image
> if the form validates...
>
> I gave the submit button a class of "submit", and the image is in the
> #loading div. In the code you can see it displays upon clicking the
> submit button, and hides with the ajaxSubmit success function. But how
> can I stop the image appearing when the form is not validated? Here is
> my code and a link to the example <a href="http://
> www.marjosilver.co.uk/new-design/form-test/css-tricks/">here</a> Can
> anyone help???
>
> <code>$(function(){
>
>   $('#change-form')
>      .jqTransform()
>      .validate({
>         submitHandler: function(form) {
>           $(form).ajaxSubmit({
>                success: function() {
>                    $('#change-form').hide();
>                    $('#loading').hide();
>                    $('#page-wrap').append("<p class='thanks'>Thanks!
> Your request has been sent.</p>")
>                }
>           });
>         }
>        });
>
>   $(".submit").click(function(){
>      $("#loading").show();
>   });
>
>    $("#addURLSArea").hide();
>
>    $('.jqTransformCheckbox').click(function(){
>        if ($('#multCheck:checked').val() == 'on') {
>            $("#addURLSArea").slideDown();
>        } else {
>            $("#addURLSArea").slideUp();
>        }
>    });
>
>    $(".jqTransformRadio").click(function() {
>        if ($(".jqTransformRadio").eq(1).attr("class") ==
> "jqTransformRadio jqTransformChecked") {
>            $("#curTextArea").slideUp();
>        } else {
>            $("#curTextArea").slideDown();
>        }
>    });
>
> });</code>
>
> >
>

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"jQuery Development" group.
To post to this group, send email to jquery-dev@googlegroups.com
To unsubscribe from this group, send email to 
jquery-dev+unsubscr...@googlegroups.com
For more options, visit this group at 
http://groups.google.com/group/jquery-dev?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to