5
\$\begingroup\$

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 "<div class='error'>$error</div><br>";
}

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


if (isset($_POST['first_name']) && isset($_POST['last_name'])) {
    if (empty($_POST['first_name']) && 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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery AJAX</title>

    <style>
        .message {
            font-family: sans-serif;
            color: #00AAE9;
            font-size: 16px;
        }

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

    <form action="ajax/change_name.php" method="POST" id="nameChange">

        Result: <div class="result"></div>


        <label for="first_name">First Name:</label>
        <input type="text" name="first_name" id="first_name">
        <br>

        <label for="last_name">Last Name:</label>
        <input type="text" name="last_name" id="last_name">        
        <br>

        <input type="submit" name="change_name" value="Change" id="change_name">
    </form>


    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="js/init.js"></script>
</body>
</html>

Is it a good practice to display a <div> and then add a class to it, so you can then style it using CSS? Is there a better way for doing this?

\$\endgroup\$
1
  • \$\begingroup\$ On a side note: 'You didn't enter your first name!' is the correct grammar. \$\endgroup\$
    – papirtiger
    Commented Aug 28, 2014 at 14:41

2 Answers 2

Reset to default
3
\$\begingroup\$

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:

<input type="text" name="first_name" required />

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/

\$\endgroup\$
2
  • \$\begingroup\$ Yeah you can do that, But server-side validation is better, You don't have to worry about what the client is doing. ;) \$\endgroup\$
    – Akar
    Commented Oct 2, 2014 at 11:03
  • 3
    \$\begingroup\$ @Akar At what point did I say to remove server-side validation? Doing a client-side check first saves time for the user (they don't have to wait for a round-trip response) and saves the server from having to do extra processing. \$\endgroup\$
    – cimmanon
    Commented Oct 2, 2014 at 12:12
0
\$\begingroup\$

Only some minor points about your HTML:

Your usage of the br element (after the message as well as in the form) doesn’t seem to be appropriate. It must only be used for meaningful line breaks. You should use CSS instead (display:block), e.g. by wrapping a field and its label in a div.

For error messages, you could use the strong element.

<div class="error"><strong>You didn’t enter your first name!</strong></div>
<div class="message">Thanks for entering everything correctly!</div>
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.