jquery validation submit - with ajax submit - click function

Question

I'm using a click function on a link to submit the form via ajax, and if the server returns with an error, a server side error is displayed.

With this method, the enter key doesn't work in the form, and I think there's probably an easier and more correct way to do this with jquery validation's submit handler.

here's my code so far...

function loginSubmit(){
    $.ajax({
        url: loginFormURL,          
        type: 'POST',
        /** contentType: "application/json;",  **/
        dataType:"text json",
        /** async: true, **/
        data:$('#loginForm').serialize(),
        success: function(data){

           if(data.isError == "false" || data.isError == ""){

                       $.postMessage(
                        'redirectURL|'+ redirectURL +'',
                        '*',
                        parent
                      );


                     } else

                     if(data.isError == "true"){

                       $("#loginError").empty().show(); 
                       // iterate over the message list and display the error
                       for (var i=0; i < data.errorMessages.length; i++){
                               // inject error message to the error container

                           $("#loginError").append(data.errorMessages[i]);

                           }    

                       // iterate over the field list and paint the fields in red

                       $('input').parent('div').addClass('inputError');



                   }

           }            
   });
}

and the click function:

 $("a#loginButton").click(function(){
                $("#loginForm").validate().form(this);
                if($('#loginForm').valid()){
                    loginSubmit();
                }
            });

Any help would be appreciated.

I think he just wants to submit the form via ajax using the enter key. — Wern Ancheta
– Wern Ancheta, Commented Jul 13, 2012 at 0:46
@Daveo wanting to utilize the submithandler within jquery validation, but also using a link for submit... — Jason
– Jason, Commented Jul 13, 2012 at 1:30

Community · Accepted Answer · 2017-05-23 11:56:21Z

1

You'll want to listen for the ENTER keypress on your input fields:

$('input').keypress(function(event) {
    if(event.which == 13) {
        loginSubmit();
        event.preventDefault();
        return false;
    }
});

Of course you might not want to capture ENTER on all your INPUT tags, just some, so you could use another selector depending on your needs.

See a similar discussion here.

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Jul 13, 2012 at 1:37

davidethell

12.1k6 gold badges47 silver badges67 bronze badges

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

1 Comment

Jason Over a year ago

Hey David, thanks - this was the direction I was heading in originally, but then thought that maybe I should use .submit (with a submit input instead of a link) and use the submithandler for the ajax...

Collectives™ on Stack Overflow

jquery validation submit - with ajax submit - click function

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related