best way to map the errors to the inputs

[Love2c0de]

Good evening,

 

I've just validated a form with jQuery/JavaScript and I'm looking to basically do the same validation with PHP.

 

I'm starting off by trimming all of the fields, then I'm going to check the required fields to see if they are empty or not. If so I want to send them back to the page but I need to display the errors next to the specific input fields and I'm not sure how to do it.

 

I understand im going to have to save the error array into a session and then print the values, but I'm not sure how to map them to the correct input field.

 

Can anyone help me?

 

Here is my JavaScipt:

$( "#reg-form" ).submit(function(e) {
 
        $('.arrow_box').css("display","none");
 
        //hold required field values
        var reqFields = new Array();
 
        //holds indexes of empty required fields
        var emptyInputs = new Array();
 
        //holds form controls and will match up with emptyInputs array to determine which error box to show
        var formControls = new Array();
 
        //get the value from all required fields
        $('.required').each(function(){
             reqFields.push($(this).val());
        });
 
        //trim each required field and push any empty fields into the emptyInputs array
        $.each(reqFields, function(key,value){
          
             if($.trim(value) == "")
             {
                 emptyInputs.push(key);
             }
        });
 
        //get all error divs
        $('.arrow_box').each(function(){
             formControls.push($(this));
        });
 
        if(emptyInputs.length > 0)
        {  e.preventDefault(); 
           //get values from emptyInputs to determine the index of the formControls to show
           $.each(emptyInputs, function(k,v){
              $(formControls[v]).css("display","block").prev('input').focus();
           });
 
           $(formControls[emptyInputs[0]]).prev('input').focus();
        }
        else
        {
           //continue in-depth validation on each specific field
           var fname = $('#fname');
           var lname = $('#lname');
           var email = $('#email');
           var dob = $('#dob');
           var mphone = $('#mphone');
           var wphone = $('#wphone');
           var ages = $('#ages');
           
           var nameRegExp = /^[a-zA-Z\s]*$/;
           var numRegExp = /\d+/g;
           var emailRegExp = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
           
          if(!nameRegExp.test($(fname).val()))
          {
              emptyInputs.push($(fname).next());               
          }
 
          if(!nameRegExp.test($(lname).val()))
          {
              emptyInputs.push($(lname).next());
          }
 
          if(!emailRegExp.test($(email).val()))
          {
              emptyInputs.push($(email).next()); 
          }
 
          if(!dob.val().match(numRegExp))
          {
               emptyInputs.push($(dob).next());
          }
 
          if(!mphone.val().match(numRegExp))
          {
               emptyInputs.push($(mphone).next());
          }
 
          if(!wphone.val().match(numRegExp))
          {
               emptyInputs.push($(wphone).next());
          }
 
          if(!ages.val().match(numRegExp))
          {
               emptyInputs.push($(ages).next());
          }
 
          if(emptyInputs.length > 0)
          {
              $(emptyInputs).each( function(k,v){
                 $(this).css("display","block");
              });
 
              $(emptyInputs[0]).prev('input').focus();
              e.preventDefault(); 
           }
           else
           {
                return true;
           }
        }
    });

Here is my PHP so far:

<?php
 
if(isset($_POST['fname']))
{
     $errors = array();
     $required = array($_POST['fname'], $_POST['lname'], $_POST['dob'], $_POST['mphone'], $_POST['wphone'], $_POST['address'], $_POST['city'], $_POST['province'], $_POST['ages']);
 
     foreach($required as $k => &$v)
     {
         $v = trim($v);
 
         if(empty($v))
         {
              array_push($errors, true);
         }
         else
         {
              array_push($errors, false);
         }
     }
     
     if(in_array(true, $errors, true))
     {
          $_SESSION['msg'] = $errors;
          header("Location: Register-Now.php");
          die();
     }
     echo "<pre>";
     var_dump($errors);
     echo "</pre>";die();
     
}
else
{
     //someone has tried to directly access the form script without a submit, send them back!
     header("Location: Register-Now.php");
     die();
}
 
?>

Really stuck, can anyone help me with this problem?

 

Thank you for your time.

 

Kind regards,

L2c.

Edited May 5, 2014 by Love2c0de