Question

I’m using the jQuery validation plugin and the form uses ajax to submit the form. I have a floating button bar which generates the buttons for pages depending on what the page is used for. These buttons sit outside of the form tag. My form’s id is account-settings. In my document.ready I have this:

$("#account-settings").validate({
        rules: {
              email: {email: true}
               },

         messages: {
                      email: {email: "Enter a valid email address."}
               },
    })

There’s a button called savesettings which saves the settings for the form. Here’s the click event:

$('#savesettings').click(function() {  

 if($('#account-settings').valid()){
    alert("Valid form");
}
else{
    alert("Not valid");
}
}

Nothing happens when I click the button… so, basically, I’m obviously not using the plugin right, somebody enlighten me? Keep reading over the documentation but I don’t see anything else…

Answer 1

You will need to serialize the form upon the user clicking the button something like..

$('#savesettings').click(function() {  

 var $as = $('#account-settings');

 if($as.valid()){

    $.post(
        /* your server page */
      , $as.serialize()
      , /* your callback function */
    );

  }

  else{
    alert("Not valid");
  }

});

I should point out the obvious accessibility pitfall with submitting a form this way where users with no JavaScript will not be able to use it.