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 <[email protected]> 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 [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-dev?hl=en
-~----------~----~----~----~------~----~------~--~---
