Javascript Form Validation

Javascript part:

// FOR REGEX (REGULAR EXPRESSION)
var empty = /^\s*$/;
var email_format = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

function validateRegistration(val) {
tof = 0;
phone = 0;
// CLEAR ERROR MESSAGES
$(val + ' .error-msg').each(function() {
$(this).remove();
});
// RESET INPUT BORDERS TO GREY (OPTIONAL), IF THIS IS NOT NECESSARRY REMOVE FUNCTION CALLS FOR function changeBorder AND THE FUNCTION ITSELF
$(val + ' .required').each(function() {
newBorder = {'border-color' : '#BBBBBB'};
$(this).css(newBorder);
});

$(val + ' .required').each(function(event) {        // VALIDATE EACH INPUT
// vars
id = $(this).attr("id");
if(empty.test($(this).val())) {
tof++;
// IF EMPTY CHANGE INPUT BORDER TO RED
changeBorder($(this));
if($(this).hasClass('phoneNumber')){    // MULTIPLE INPUTS FOR ONE POST VALUE EX.: 123 - 456 - 789
phone++;
if(phone == 1){
displayError($(this));
}
}
else{
displayError($(this));
}
}
else{
// HAS VALUE BUT MUST BE CHECKED IF VALID INPUT
if($(this).hasClass('phoneNumber')){
if(isNaN($(this).val())){
tof++;
phone++;
if(phone == 1){
changeBorder($(this));
displayError($(this));
}
}
}
else if($(this).hasClass('zipCode')){

// CHECK IF INPUT IS DIGIT, NO OTHER CHARACTERS ALLOWED
if(isNaN($(this).val())){
tof++;
changeBorder($(this));
displayError($(this));
}
}
else if($(this).hasClass('email')){

// CHECK IF VALID EMAIL
if(!email_format.test($(this).val())){
tof++;
changeBorder($(this));
displayError($(this));
}
}
}

});
// RETURN T OR F VALUE
if(tof){

// FORM HAS INVALID INPUTS THEREFORE DATA WILL NOT BE POSTED
return false;
}
else{
return true;
}
}
// CHANGE COLOR OF BORDER TO RED IF INPUT IS INCORRECT OR BLANK
function changeBorder(val){
newBorder = {'border-color' : '#B01B00'};
$(val).css(newBorder);
}

function displayError(val){
err = $(val).attr("title");
$(val).closest('div').append('<p>' + err + '</p>');
}

// ONLY DIGITS ARE ALLOWED TO BE ENTERED, ELSE WILL NOT BE DISPLAYED
function numbersonly(myfield, e, dec)
{
var key;
var keychar;

if(window.event)
key = window.event.keyCode;
else if(e)
key = e.which;
else
return true;
keychar = String.fromCharCode(key);

// control keys
if ((key==null) || (key==0) || (key==8) || (key==9) || (key==13) || (key==27) )
return true;
// numbers
else if ((("0123456789").indexOf(keychar) > -1))
return true;
// decimal point jump
else if (dec && (keychar == "."))
{
myfield.form.elements[dec].focus();
return false;
}
else
return false;
}

the “numbersonly” function above came from this site.

HTML Part (Form)


<form id="formOne" onsubmit="return validateRegistration('#formOne');" method="post" action="/">
<div><input type="text" name="customer_last_name" id="customer_last_name" title="Please supply valid last name"></div>
<div>
<select id="customer_country" name="customer_country" title="Please select country">
<option value="">Select Country</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
</select>
</div>
<div>
<input type="text" id="customer_phone_parts_1" name="customer_phone_parts[one]"onKeyPress="return numbersonly(this, event)" title="Please supply valid phone number" onKeyPress="return numbersonly(this, event)">
<input type="text" id="customer_phone_parts_2" name="customer_phone_parts[two]"onKeyPress="return numbersonly(this, event)" title="Please supply valid phone number" onKeyPress="return numbersonly(this, event)">
</div>
</form>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s