html form validation,html - JavaScript - Form Validation - Stack Overflow

As Kevmo mentioned a library, here is a quick and dirty example using jquery. Once you have the basics of javascript mastered look into jQuery, it will make your life a lot easier.

HTML not the absence on any calls to javascript functions and our required fields have the required class

Family name

Family Name Required

First name

First Name required

Dogs' name

CSS Just some basics

.requiredText {

display:none;

color:#F00;

}

label {

display:inline-block;

width:20%;

}

.required {

border-color:#F33;

}

input {

width:60%;

border:solid 1px #CCC;

margin-top:5px;

}

Javascript

I've used the following from jquery:

$(document).ready(function () { /* Execute when DOM is loaded */

/*Assign blur event handler to fields with required class */

/*I have used the id of the form (#formToValidate) to scope the selctor.

Not required but a good practice*/

$("#formToValidate .required").blur(function () {

if ($(this).val() === "") { /*Check the value of the item being blured"*/

$(this).next(".requiredText").slideDown('fast'); /* Slide down the nearest alert text sibling*/

} else {

$(this).next(".requiredText").slideUp('fast'); /* Slide up the nearest alert text sibling*/

}

});

});