Combining both techniques

What we’re trying to achieve is have the security of server side validation, the elegance of displaying the errors inline, as well as have a fall back behavior. So even when users turn off Javascript – you will see the same error messages. Oh and of course, we will also have the good user experience of the page not refreshing when there’s errors.

Keep in mind that you will need a bit of programming know how – especially in PHP and Javascript. Ready to get started? Let’s begin.

The Markup

We start with a regular form. The submit action would be a processing page where our server side logic will take place. You can also have the processing page the same as the page where the form is. But I like to keep files separate. Copy the code below into your HTML:

  First Name
  
  Email
  
  

Nothing fancy here. Just a regular form and a couple of fields. Remember to make your field names unique – for this is what we’ll use to validate our form.

The Processing Page

So when our form submits, it passes the $_POST array to this page. If you’re new to validating forms, the code below simply goes through the array and checks it against our rules for each field. Note that in our case – I’m simply checking if first name and email is empty. Of course in the real world, you will have to check for valid email and such.

session_start();
if(isset($_POST)){
  	if (empty($_POST['first_name'])) {
		$_SESSION['errors'][‘first_name'] = ‘First name is missing’;
        	}
	if (empty($_POST[‘email’])) {
		$_SESSION['errors'][‘email'] = ‘email is missing’;
        	}
        if(count($_SESSION['errors']) > 0){
	    //This is for ajax requests:
            if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&  strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
                echo json_encode($_SESSION['errors']);
                exit;
             }
	    //This is when Javascript is turned off:
           echo “
”;
           foreach($_SESSION['errors'] as $key => $value){
	      echo “
” . $value . “
”;
           }
           echo “
”;exit;
    }else{
	//form validation successful - process data here!!!!
   }
}

The key to the code above is the check for an Ajax request. Notice the json_encode() method. This is when it’s an Ajax request and we simply echo our error array in JSON format. We will need this to format our inline messages later. The rest of the code is simply handled as if it’s regular server side processing.
Again, notice the part where if it’s NOT an Ajax request – we simply echo out a list of our validation errors. You would probably want to style this better, or even echo it out in the same page as the form. But for the sake of our tutorial, I want to make it short and concise.

Our Javascript

I prefer to write jQuery, so the code below will only work if jQuery is included. The code below is to be added to our form page:

var data = {};
$(document).ready(function() {
  $('input[type="submit"]').on('click', function() {
      resetErrors();
      var url = 'process.php';
      $.each($('form input, form select'), function(i, v) {
          if (v.type !== 'submit') {
              data[v.name] = v.value;
          }
      }); //end each
      $.ajax({
          dataType: 'json',
          type: 'POST',
          url: url,
          data: data,
          success: function(resp) {
              if (resp === true) {
                  	//successful validation
                      $('form').submit();
                  	return false;
              } else {
                  $.each(resp, function(i, v) {
	        console.log(i + " => " + v); // view in console for error messages
                      var msg = ''+v+'';
                      $('input[name="' + i + '"], select[name="' + i + '"]').addClass('inputTxtError').after(msg);
                  });
                  var keys = Object.keys(resp);
                  $('input[name="'+keys[0]+'"]').focus();
              }
              return false;
          },
          error: function() {
              console.log('there was a problem checking the fields');
          }
      });
      return false;
  });
});
function resetErrors() {
    $('form input, form select').removeClass('inputTxtError');
    $('label.error').remove();
}

Plenty of things going on above. Of course everything is wrapped inside our document.ready() handler, then we put a .click() for our submit button. So every time we click the submit button, we go through each field in the form and create a data object. This object contains the field names and their respective values (you can also use jQuery’s .serialize() for this purpose).
We make an Ajax call to our processing page – where it does the validation in our PHP code previously. Now, remember our server side will echo a JSON object with our field names and error messages? We simply handle this by adding an error class and adding a “label” with the message through jQuery’s .after() function.

Of course, if there’s no errors – the form does a hard .submit() – to the same processing page and handled accordingly.

Our CSS

Of course, we have add our styling so our field will look like our screenshots above. Simply add this code inside style tags.

.error {
   color: #ff0000;
   font-size: 12px;
   margin-top: 5px;
   margin-bottom: 0;
}
.inputTxtError {
   border: 1px solid #ff0000;
   color: #0e0e0e;
}

Again, the styles are real basic and you probably want to do better in your own forms.

Conclusion

So there you have it. We’ve combined best of both worlds: server side and client side validation in one solution (thanks to Ajax). Our code has clear separation and very manageable. If a field validation rule has to change – we only need to change it in one place: the server code. Also, our users will benefit from our friendly form – and the way it gracefully tells them when they’ve missed a field and such.
Let me know your thoughts and if you think this solution is a good fit for your projects.

The post How to do Ajax form validation with inline error messages – without using a plugin appeared first on Michael Soriano.