STEP 1) THE HTML

  
    

      Name:
      Email:
      Password:
      Confirm Password:
      
  

You should already be familiar with HTML forms, and yes, this is nothing but a simple form here – Except that we add an onsubmit to the 

 to “intercept” the default form submission, and process our own Javascript.

 

STEP 2) THE JAVASCRIPT

function doRegister () {
  /* [PART 1 - CHECKS] */
  // Even though the HTML will do some basic checks
  // It is still good to do some of your own
  var checks = {
    name : document.getElementById("r-name"),
    email : document.getElementById("r-email"),
    pass : document.getElementById("r-pass"),
    cpass : document.getElementById("r-cpass")
  },
  error = "";

  // Name check
  if (checks.name.value=="") {
    error += "Please enter your name\n";
  }

  // Email check
  var pattern = /^(([^()\[\]\\.,;:\s@"]+(\.[^()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  if (!pattern.test(checks.email.value.toLowerCase())) {
    error += "Please enter a valid email\n";
  }

  // Password check
  // You can impose a minimum password length here
  if (checks.pass.value.length

Heck. The Javascript to process the form submission may look complicated, but it is actually very straightforward if you walk through it part by part.

• First, we do some checks on the user input, which is kind of optional. HTML actually provides a pretty robust checking system with properties – required, type, maxlength, pattern, etc… We are adding Javascript checks here only because HTML cannot match/confirm the passwords. I shall leave it up to you to decide whether Javascript checks are necessary for your own project.
• If the checks pass, we process the form via an AJAX call, which runs in the background instead of posting and refreshing the entire page. For those do not know, AJAX stands for Asynchronous Javascript And XML. I shall leave a link to my other guide in the extra section if you are interested to read more.
• That’s it. Just remember to return false at the end of it, to prevent the form from being submitted.

STEP 3) SERVER-SIDE SCRIPT

 count($error)==0 ? 1 : 0,
  "error" => $error
]);

The final piece of the puzzle is to process the POST data on the server-side and respond back to the Javascript accordingly.

• Do the form checks… again. Actually, you can be lazy to skip the checks on the HTML and Javascript, but I will recommend to always do server-side checks.
• Save the POST data, or process it accordingly.
• Finally, respond back to the client side – This can be a simple echo "ok", but I like to give a little more details on what went wrong with a JSON encoded array.

JQUERY JAVASCRIPT

function doRegister () {
  /* [PART 1 - CHECKS] */
  // Even though the HTML will do some basic checks
  // It is still good to do some of your own
  var checks = {
    name : $('#r-name'),
    email : $('#r-email'),
    pass : $('#r-pass'),
    cpass : $('#r-cpass')
  },
  error = "";

  // Name check
  if (checks.name.val()=="") {
    error += "Please enter your name\n";
  }

  // Email check
  var pattern = /^(([^()\[\]\\.,;:\s@"]+(\.[^()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  if (!pattern.test(checks.email.val().toLowerCase())) {
    error += "Please enter a valid email\n";
  }

  // Password check
  // You can impose a minimum password length here
  if (checks.pass.val().length

THE SUMMARY

• Build your HTML form. Remember to define the onsubmit property to “intercept” the submission with a Javascript function.
• Javascript – Do your own checks if you want, then fire an AJAX request to the server.
• Server-side – Check the POST data, process it, and respond accordingly.

FORM VALIDATION

Need more help with the form validation? Read my other guide:

Form Validation Using Javascript & HTML (Example Code Included)

VANILLA AJAX

Just what the heck is AJAX, and what does it do? Check out my other guide:

Vanilla Javascript AJAX Tutorial (Learn With Examples)

EXAMPLE CODE DOWNLOAD

Click here to download all the example code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
 

The post 3 Steps to Submit a Form Without Refreshing Page appeared first on Code Boxx.