Handle jquery .ajax results and display validation status for individual fields next to them

Question

Validating my field on the client side and try to display a warning for each one next to the field is not a problem:

<div class="formblock">
    <label class="screen-reader-text">Email</label>
    <input type="text" name="email" {if $smarty.session.email} value={$smarty.session.email} disabled {/if} id="email" class="txt requiredField email" placeholder="Email:"/>
</div>

<div class="formblock">
    <label class="screen-reader-text">Message</label>
    <textarea name="comments" id="commentsText" class="txtarea requiredField"       placeholder="Message:"></textarea>
</div>

E.g to check that they are empty I just use .each and check this for every field and append a span next to it.

$('.requiredField').each(function () {
    if ($.trim($(this).val()) == '') {
        var labelText = $(this).prev('label').text();
        $(this).parent().append('<span class="error">You forgot to enter a ' + labelText + '.</span>');
        $(this).addClass('inputError');
        hasError = true;

    }
});

However on the server side the way that I normally do things is perform validation for each field and then append the error message as a var ($ERRORTEXT in that case) then do an echo in the end and display this after ajax success on the top of the form.

$ERRORTEXT .= " <li> Name has to contain more than two characters </li> ";

if ($error)
{
echo $ERRORTEXT; 
}

How can I do this per field (similar to what I do on the client side) and return it to the span next to them ? I presume that instead of returning one var back with echo I would have to return maybe a json result and then handle this ?

Serialize the form -> send to server and validate -> serialize validation result as JSON and handle it on the client side. Let me know if anything is unclear — Johan, Aug 08 '13 at 12:57
ok thanks is the last bit that I need an example of I possible (serialize validation result as JSON and handle it on the client side) to see what is the best way to do this. — Athanatos, Aug 08 '13 at 13:25

score 1 · Accepted Answer · edited May 23 '17 at 12:11

yourfile.php

header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');

$validationData = json_decode($_POST['validationData'], true);

//do validation stuff here
//$validationData is an associative array containing all your validation data
//sent from the client's AJAX call

$data = array('error' => 'my errormessage');
//serializing some dummy data to the client
echo json_encode($data);

How to convert your form data to JSON: Convert form data to JavaScript object with jQuery

someotherfile.htm

$.ajax({
    url: 'yourfile.php',
    data: { validationData: JSON.stringify(yourFormDataObject) },
    success: function(data){
        console.log(data.error); //'my errormessage'
    }
});

The parsed object, data, which is recieved from the server could contain an id property to match with an element, and a message that you show next to it.

Handle jquery .ajax results and display validation status for individual fields next to them

1 Answers1