Question

I’m using jQuery with PHP for form validation. I want to return the fields that do not validate so i can highlight them using javascript

this is my attempt using PHP(validate.php):

<?php
...
$a_invalidInput = array();

$from = $_POST['from'];
$to = $_POST['to'];
$email_to = $_POST['email_to'];

if( empty($from) ){
   $a_invalidInput[] = 'from';
}

if( empty($to) ){
   $a_invalidInput[] = 'to';
}

//validate the email_to address
if( empty($email_to) ){
   $a_invalidInput[] = 'email_to';
} else{

   //do more validation for email
}
...
?>

This is my jquery code:

...

var data = "from="+ from + "&to=" + to + "&email_to=" + email_to; 

$.ajax({
   url: "includes/validate.php",
   type: "POST",
   data: data,
   success: function(){

      //highlight fields that do not pass validation

   }
});

...

I’m not sure if i’m on the right path or not AND how to return the input fields that do not pass validation so i can add a class to highlight the fields that do not pass validation.

I could do this using javascript but i prefer using a php file for validation

Thanks
Marco

Answer 1

One way to go would be to return a json encoded array of fields that do not pass.

From your PHP script, output your Invalid Input array (json encoded so your javascript can use it). Then on the Javascript side, you want to check if that output has any values. If it does, use them.

<?php
    // at the end of your script
    header('Content-type: application/json');
    echo json_encode($a_invalidInput);
    exit();
?>

Now in your JQuery, you want to use that json output…

$.ajax({
    url: "includes/validate.php",
    type: "POST",
    dataType: "json",
    data: data,
    success: function(data){
        if (data !== undefined
        &&  data.length > 0) {
            for (var i = 0; i < data.length; i++) {
                var field_name = data[i];
                var field = $('input[name=' + field_name + ']');

                // now you have the field, so you can modify it accordingly.
            }
        }
    }
})