One of the biggest challenges in software development is the ability to reduce user errors and bottlenecks as much as possible. This can be achieved by strong validation for all form inputs and covering all scenarios.

 

In a web based application to validate form data you have a couple of options. Some of us may use client side validation only but the others may use server side validation so in this article i will demonstrate the these methods and i will show the best methodology to use.

 

The Problem 

we have a form like user registration and we need to validate this form before saving user data.

<form method="post">
   <p>
     <label>Username</label>
     <input type="text" name="username" />
   </p>
   <p>
     <label>Email</label>
     <input type="text" name="email" />
   </p>
   <p>
     <label>Password</label>
     <input type="password" name="password" />
   </p>
   <p>
     <label>Confirm password</label>
     <input type="password" name="confirmPassword" />
   </p>
</form>

 

First Method: Client Side Validation

The first method is to use client side validation so you have to write javascript function to do the validation when form submit as shown:

<form method="post" onSubmit="validate()">
</form>

<script type="text/javascript">
   function validate()
   {
      if($("input[name=username]").val() != "") {
         // show message
         return false
      }

       if($("input[name=email]").val() != "") {
         // show message
         return false
      }

      // ....
   } 
</script>

As shown above we write the validation as a Javascript function and checked for all the cases like required fields and email.

 

But using Javascript only for validation is not trusted and has many problems like:

• What about if the user uses outdated browser or a browser that has Javascript disabled, in that case the validation not work and the form will submit without validating and this may break the whole system.
• In some forms you need to check for the existence of specific data in the database like in the above form you need to check if the email or username is already exist or not.

so let’s try another option by validate through server side.

 

Second Method: Server Side Validation

The second method is to use server side validation by writing the validation login into server, let’s say you use PHP as server side language, you could write your validation logic after submit as shown:

<?php
if(isset($_POST['submit'])) {
    
     // write your validation logic before saving user data

     if($_POST['username'] == "") {
         // display error message
         return false;
     }
     
      //....

    
}

This solution is trusted and covers all cases of validation including basic form validation like checking for required fields and also solves the problem of checking into the database.

 

There is only one drawback of this approach:

• You need to submit the form to show the validation messages which means you need to do a post back to server but this considered a bad practice in today modern web applications. you have to make validations shown on user input.

 

Third Method: Client Side and Server Side Validation

Another method and many people use it is to use both kinds of validation which means you have to write the validation logic in Javascript and if that fails it will fallback to the server side validation like this:

<?php
if(isset($_POST['submit'])) {
    
     // write your validation logic before saving user data

     if($_POST['username'] == "") {
         // display error message
         return false;
     }
     
      //....

    
}
?>

<form method="post" onSubmit="validate()">
</form>

<script type="text/javascript">
   function validate()
   {
      if($("input[name=username]").val() != "") {
         // show message
         return false
      }

       if($("input[name=email]").val() != "") {
         // show message
         return false
      }

      // ....
   } 
</script>

As shown above we write validation logic in Javascript and also in PHP. But there is a drawback for this approach also is the duplication of validation login in the client side and server side.

How about using a single code that works in both client side and server side

 

Fourth Method: Submit the form via ajax

In the fourth method seems reasonable so you have to write all your validations in server then to submit the form use an ajax call instead of submitting it the classic way as shown here:

<?php
if(isset($_POST['submit'])) {
    
     $response = [];

     // write your validation logic before saving user data

     if($_POST['username'] == "") {
         // display error message
         $response[] = "username required";
     }
     
      //....

    
     echo json_encode(['status' => 0, 'response' => $response]);
}
?>

<form method="post" onSubmit="send()">
</form>

<script type="text/javascript">
   function send()
   {
      $.ajax({
          // send request and handle response
      });
   } 
</script>

As shown above we created the validation only on the server side and what the client will do is only send the request via ajax call. After that the user may check the response for errors and if it exist display it in some kind of modal or alert dialog.

This method seems perfect because it solves the problem of not post back the form and also the validation on the server side is more trusted than client side.

 

Conclusion

In this article you learned about the difference about how to choose a validation method and Saw the drawbacks of using client side validation only and the idea of using the server side logic in your web app.