CSS for Form Field Errors

Question

We have a three dropdown date of birth field in our form, which, right now is producing three separate error messages if the fields are left blank and user clicks submission.

We would like to either make it just one of those error messages, or show some other display beneath the submission button.

Any guidance would be fantastic!

Answer 1

Although not mentioned, I'd have to imagine you're using JavaScript to validate the form, and if so, try something like the following, whereby in your HTML you have a single span tag (or p) that's accessible via an id tag (like #error or something). In your JavaScript, simply set the #error tag to whichever error was last seen by the JavaScript. As you'll note below, if both "birth date" and "name" are missing, the span tag will only display the missing name error text. That said, you could easily concatenate the strings if need be.

Pseudocode (JS)

function validateForm() {
    var isValid = true,
    var myErrorText;
    if (birth date is missing) {
        isValid = false;
        errorText = "You must enter a birth date"; 
    }
    if (name is missing) {
        isValid = false;
        errorText = "You must enter a name"; 
    }

    // Display the error message if the form is invalid
    if (!validForm) {
        $('span#error').text(myErrorText);
    }

    return validForm;
}

HTML

<form method="post" action="/whatever" onSubmit="return validateForm()">
    <input type="text" id="birthDate" name="birthDate" >
    <input type="text" id="name" name="name">
    <button type="submit" id="submit" class="btn">Submit</button>
</form>
<span id="error"></p>