Form validation problem

JavaScript
1

Hi everyone…I am new to javascript.

The javascript form validation works fine , but for the first name and the last name field, it is accepting numeric values , but I want it to accept only alphabets. Could you please let me know whats wrong in the code below. Also is there any other error in the below code.

–javascript file:-

// JavaScript Document
var strErrors = “”;

function validateForm() {
// clean out the string of errors if validation fails more than once
strErrors = “”;

// calls to the various function to do their particular tasks
validateName1();
validateName2();
validateEmailAddress();
validatePhone();
validateRadios();
validateCheckBoxs();
validateguestNo();


if (strErrors.length > 0) {
	displayErrors();
	return false;
}
else {
	return true;	
}

}

function validateName1() {
// get the value of what was erntered into the nrobame field
var strName = document.getElementById(“fName”).value;

if(strName.length < 2) {
	strErrors += "Please enter your name.~";
}

}

function validateName2() {
// get the value of what was erntered into the nrobame field
var strName = document.getElementById(“lName”).value;

if(strName.length < 2) {
	strErrors += "Please enter your name.~";
}

}

function validateEmailAddress() {
// get the value of what was erntered into the email field
var strEmail = document.getElementById(“emailAdd”).value;

var emailRegex =  /^[\\w\\.]+@[a-zA-Z_]+?\\.[a-zA-Z\\.]{2,6}$/;

// check the validity of the email address now then cos something has been entered 
// into the email field - already checked by the checkIfFieldEmpty() function
if (!emailRegex.test(strEmail)) {
	strErrors += "Please enter a valid email address.~";
}

}

function validatePhone() {
// get the value of what was erntered into the nrobame field
var strName = document.getElementById(“phoneNo”);
var stripped = strName.value.replace(/[\(\)\.\-\ ]/g, ‘’);

if(isNaN(parseInt(stripped))) {
	strErrors += "Please enter your phone number.~";
}

}

function validateRadios() {

var chks = document.getElementsByName("contactMeth"); 
var passed = false;

for(i = 0; i < chks.length; i++) {
	if(chks[i].checked ==  true) {
		passed = true;
	}
}
if(passed == false) {
	strErrors += "Please select contact method.~";
}

}

function validateCheckBoxs() {

var chks = document.getElementsByName("roomtype[]"); 
var passed = false;

for(i = 0; i < chks.length; i++) {
	if(chks[i].checked ==  true) {
		passed = true;
	}
}
if(passed == false) {
	strErrors += "Please select room type.~";
}

}

function validateguestNo() {
// get the value of what was erntered into the nrobame field
var strName = document.getElementById(“guestNo”).value;

if(strName.length < 1) {
	strErrors += "Please enter number of guests.~";
}

}

function displayErrors() {

document.getElementById("errors").innerHTML = "<p>Oops! Please correct the following items:</p><ul>";
var arErrors = strErrors.split("~");
for (c = 0; c < arErrors.length - 1; c++) {
	document.getElementById("errors").innerHTML += "<li>" + arErrors[c] + "</li>";
}
document.getElementById("errors").innerHTML += "</ul>";

}

Thank you…

2

To validate it’s only letters something like this maybe

var strErrors = ""
var strName = "abc123"

if (!strName || /[^a-z]/gi.test(strName)){
	console.log ('Invalid Name'); // just to test
	strErrors += "Please enter your name.~";
}

Anything inside the square brackets preceded by ^ means not this. So if it matches anything other than a-z then true. The (g) means globally i.e. through out the string and the (i) mean case insensitive.

Also see that you are basically repeating the same function twice for first and last name. Would be good to make that just one name checking funtion.

RLM

3

Thanks a lot RLM

Can you please let me know where the code you have written has to be placed so that I can try. The code which I have pasted was not written by me.

Thank you…

4

The code written by RLM2008 should go inside the validateName1 and validateName2 functions, like so:


function validateName1() {
    var strName = document.getElementById('fName').value;
    if (!strName || /[^a-z]/gi.test(strName)){
        strErrors += "Please enter your name.~";
    }
}

function validateName2() {
    var strName = document.getElementById('lName').value;
    if (!strName || /[^a-z]/gi.test(strName)){
        strErrors += "Please enter your name.~";
    }
}
5

By the way, arjun98854, if you are interested in learning JavaScript, SitePoint’s book Simply JavaScript has a short section dedicated to form validation. It would help you to write your own code that is honestly cleaner and more flexible than what you have now.

6

Thanks a lot mwistrand and RLM for helping me to fix the code. I have used the code which mwistrand has modified for me and it works perfectly fine…

Thanks again to both of you.