Displaying styled validation messages to user I'm new to AJAX and jQuery, and just for testing, I created this simple code. When the user enters their First Name and their Last Name it displays a message that says


  Thanks for entering everything correctly!


in Bluish color, and when the user forgets to enter their First Name and their Last Name it displays an error that says


  You didn't entered anything


in Red color or something similar.  I know it sounds stupid, but this is just testing.

change_name.php

function displayError($error)
{
    // Display a div with a class of error, We style it using CSS
    echo "&lt;div class='error'&gt;$error&lt;/div&gt;&lt;br&gt;";
}

function displayMessage($message)
{
    // Display a div with a class of message, We style it using CSS
    echo "&lt;div class='message'&gt;$message&lt;/div&gt; &lt;br&gt;";
}


if (isset($_POST['first_name']) &amp;&amp; isset($_POST['last_name'])) {
    if (empty($_POST['first_name']) &amp;&amp; empty($_POST['last_name'])) {
        displayError('You didn\'t entered anything!');
    } else if (empty($_POST['first_name'])) {
        displayError('You didn\'t entered your first name!');
    } else if (empty($_POST['last_name'])) {
        displayError('You didn\'t entered your last name!');
    } else {
        displayMessage('Thanks for entering everything correctly!');
    }
}


JavaScript

$(document).ready(function(){
    $('#nameChange').on('submit', function (e) {

        $.ajax({
            type: 'POST', 
            url: 'ajax/change_name.php',
            data: $(this).serialize(),
            success: function(data) {
               $('.result').empty().append(data);
            }
        });

        e.preventDefault();
    });
});


index.php

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;jQuery AJAX&lt;/title&gt;

    &lt;style&gt;
        .message {
            font-family: sans-serif;
            color: #00AAE9;
            font-size: 16px;
        }

        .error {
            font-family: sans-serif;
            color: #E70000;
            font-size: 16px;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;form action="ajax/change_name.php" method="POST" id="nameChange"&gt;

        Result: &lt;div class="result"&gt;&lt;/div&gt;


        &lt;label for="first_name"&gt;First Name:&lt;/label&gt;
        &lt;input type="text" name="first_name" id="first_name"&gt;
        &lt;br&gt;

        &lt;label for="last_name"&gt;Last Name:&lt;/label&gt;
        &lt;input type="text" name="last_name" id="last_name"&gt;        
        &lt;br&gt;

        &lt;input type="submit" name="change_name" value="Change" id="change_name"&gt;
    &lt;/form&gt;


    &lt;script src="//code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/init.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;


Is it a good practice to display a &lt;div&gt; and then add a class to it, so you can then style it using CSS? Is there a better way for doing this?
Why wait until the data has gone to the server before you inform the user that their name is empty?  You should be doing any processing up front that you can for performance reasons (though you'll still need to do validating from the server side for security reasons).  I recommend the addition of the required attribute:

&lt;input type="text" name="first_name" required /&gt;


You can even use CSS to inform the user that the field contains invalid data.

input:invalid {
    border: 1px solid red;
}


Learn more: http://www.html5rocks.com/en/tutorials/forms/html5forms/