Avoided submitted form if user refreshes

[toplisek]

I'm using form validation like:

jQuery(document).ready(function() {
 // validate signup form on keyup and submit
 var validator = $("#validationForm").validate({
  rules: {
   firstname: "required", //Set the first name field to be a required Form

   email: {
    required: true, //Set the e-mail field to be a required Form
    email: true,  //Set the e-mail field to be validated as an e-mail address
   },

  },
  messages: {
   firstname: "Enter your firstname",
   email: {
    required: "Please enter a valid email address",
    minlength: "Please enter a valid email address",
   }
  },

 });


});

I have seen handler if form is submitted like:
[techietips.net...]

  // specifying a submitHandler this will submit the form after we have validated ok
  submitHandler: function() {


return false; // avoid the actual submit of the form.

  }

How to set correct handler and avoid any submitted values if form is not validated. User can refresh page and it will be sent form. This is an issue.

[thomcraver]

If you're using a INPUT/SUBMIT, try changing it to INPUT/BUTTON. Then use OnClick() to call the AJAX code.

[phranque]

if you are going to do this using a button input element, then you should code the form to work with javascript disabled.
then during the onload event, use javascript to change the submit input element to a button with an onclick attribute.

this will give everyone a usable experience.

in the same vein, make sure you are also doing server side form input validation in case the javascript form validation is disabled or otherwise bypassed.

[Readie]

Also, a thing to watch out for if you are replacing the submit button with an input - Many developers seem to forget that people like to submit forms by pressing return - so I suggest coding a handler for that too.

[toplisek]

Can you send me the best example how to solve in the correct way:
1. try changing it to INPUT/BUTTON.
2. Then use OnClick()