Form Validation help please

[demontemplates]

Hi all, I have a contact for that requires validating for a number of things. It validates Required for all parts of the form however fine.

My question is how can I ensure the client fills out the form fully. For instance, here in the UK we use 11 digits for phone numbers, but the form will validate if the clint enters just 1, so how can I ensure the customer actually enters all 11.

Here is the javascript I am using

function isFilled(str){ return (str != ""); }
	function isEmail(str) {	return (str.indexOf(".") > 2) && (str.indexOf("@") > 0); }
 	function isDigital(str)	{ return(parseFloat(str,10)==(str*1)); }
 	function isCurrency(val) { 	var re = /^(\$?\d+\$?|\$?\d+\.\d+\$?)$/; return (re.test(val)); }
		function ValidForm(form) {
		var field, i;
		var req = new Array(10);
		var email = new Array(1);
		var digits = new Array(1);
		var currs = new Array(0);
		req[0] = "rw_First_Name";
		req[1] = "rw_Last_Name";
		req[2] = "re_Email";
		req[3] = "rd_Mobile_Number";
		req[4] = "r_Hair_Service";
		req[5] = "r_Stylist";
		req[6] = "r_Preferred_Day";
		req[7] = "r_Preferred_Date";
		req[8] = "r_Month";
		req[9] = "r_Preferred_Time";
		email[0] = "re_Email";
		digits[0] = "rd_Mobile_Number";

		for (i=0;i<10;i++)	{
			eval("field = form." + req[i]);
			if (!isFilled(field.value))	{
				alert("Field '" + field.title + "' is required to be filled in before successful submission.");
				field.focus();
				return false;
				break;
			}}
		for (i=0;i<1;i++)	{
			eval("field = form." + email[i]);
			if (!isEmail(field.value)) {
				alert("Field '" + field.title + "' is required to be filled in with valid email addresses before successful submission.");
				field.focus();
				return false;
				break;
			}}
		for (i=0;i<1;i++)	{
			eval("field = form." + digits[i]);
			if (!isDigital(field.value)) {
				alert("Field " + field.title + " is required to be filled in only with digits (0-9) and decimal point before successful submission.");
				field.focus();
				return false;
				break;
			}}
		for (i=0;i<0;i++)	{
			eval("field = form." + currs[i]);
			if (!isCurrency(field.value)) {
				alert("Field " + field.title + " is required to be filled in only with digits (0-9) a decimal point, or a dollar sign before successful submission.");
				field.focus();
				return false;
				break;
			}}
		return true; }

[paul_wilkins]

My question is how can I ensure the client fills out the form fully. For instance, here in the UK we use 11 digits for phone numbers, but the form will validate if the clint enters just 1, so how can I ensure the customer actually enters all 11.

You can get the digits from the telephone field using a regular expression, then check that it's the allowed length.

var digits = form.elements.rd_Mobile_Number.replace(/[^\d]/g, '');
if (digits.length != 11) {
    ...
}

[demontemplates]

You can get the digits from the telephone field using a regular expression, then check that it's the allowed length.

var digits = form.elements.rd_Mobile_Number.replace(/[^\d]/g, '');
if (digits.length != 11) {
    ...
}

Thanks Paul for this. Can I ask how you would code it into what I am already using?

[paul_wilkins]

Thanks Paul for this. Can I ask how you would code it into what I am already using?

Are you sure? I would rewrite most of what you are already using.

[paul_wilkins]

Thanks Paul for this. Can I ask how you would code it into what I am already using?

Are you sure? I would rewrite most of what you are already using.

After removing the eval parts and performing a simple restructure of the validation information, this is what we get:

function isFilled(str) {
    return str.length > 0;
}
 
function isEmail(str) {
    return str.indexOf(".") > 2 && str.indexOf("@") > 0;
}
 
function isDigital(str) {
    return !isNaN(Number(str));
}
 
function isCurrency(val) {
    var re = /^(\$?\d+\$?|\$?\d+\.\d+\$?)$/;
    return re.test(val);
}
 
function ValidForm(form) {
    var validationRules = [
        {name: 'rw_First_Name', required: true},
        {name: 'rw_Last_Name', required: true},
        {name: 're_Email', required: true, email: true},
        {name: 'rd_Mobile_Number', required: true, digits: true},
        {name: 'r_Hair_Service', required: true},
        {name: 'r_Stylist', required: true},
        {name: 'r_Preferred_Day', required: true},
        {name: 'r_Preferred_Date', required: true},
        {name: 'r_Month', required: true},
        {name: 'r_Preferred_Time', required: true}
    ],
        i,
        field,
        validate;
    for (i = 0; i < validationRules.length; i += 1) {
        validate = validationRules[i];
        field = form.elements[validate.name];
 
        if (validate.required && !isFilled(field.value)) {
            alert("Field '" + field.title + "' is required to be filled in before successful submission.");
            field.focus();
            return false;
        }
        if (validate.email && !isEmail(field.value)) {
            alert("Field '" + field.title + "' is required to be filled in with valid email addresses before successful submission.");
            field.focus();
            return false;
        }
        if (validate.digits && !isDigital(field.value)) {
            alert("Field " + field.title + " is required to be filled in only with digits (0-9) and decimal point before successful submission.");
            field.focus();
            return false;
        }
        if (validate.currency && !isCurrency(field.value)) {
            alert("Field " + field.title + " is required to be filled in only with digits (0-9) a decimal point, or a dollar sign before successful submission.");
            field.focus();
            return false;
        }
    }
    return true;
}

Hopefully the code is easier to understand now, and should be easier to modify to achieve your desired end result.

[demontemplates]

HI Paul

Just entered your rvised coding and the phone number still validtaed if I put just 2 digits in?

[paul_wilkins]

Just entered your rvised coding and the phone number still validtaed if I put just 2 digits in?

I'm leaving that part as an exercise for you to perform. It's easily done now given the restructuring of the code.

[demontemplates]

Thanks again paul, but thats my hurdle. I have no idea in how to acheive this?

[demontemplates]

Thi looks like a good bit of code but I have no idea how to include it?

function testTelNumber () {
var myTelNo = document.getElementById('telnumber').value;
// If invalid number, report back error
if (!checkUKTelephone (myTelNo)) {
alert (telNumberErrors[telNumberErrorNo]);
}
// Otherwise redisplay telephone number on form in corrected format
else {
document.getElementById('telnumber').value = checkUKTelephone (myTelNo);
alert ("Telephone number appears to be valid");
}
}

[paul_wilkins]

Thanks again paul, but thats my hurdle. I have no idea in how to acheive this?

A slight variation of the code from post #3 can be put in to a function called isTelephoneNumber()

function isTelephoneNumber(str) {
    var digits = str.replace(/[^\d]/g, '');
    return digits.length === 11;
}

Then in the validation rules for the mobile number you can replace the digits with one for telephone instead

{name: 'rd_Mobile_Number', required: true, digitstelephone: true},

Because you now don't have anything else that required digits, that section of code can be updated to use the isTelephoneNumber function instead.

if (validate.digitstelephone && !isDigitalisTelephoneNumber(field.value)) {
    alert("Field " + field.title + " is required to be filled in only with digits (0-9) and decimal point before successful submissionwith an 11 digit telephone number.");
    field.focus();
    return false;
}

[demontemplates]

Paul, your a top bloke, many thanks

[demontemplates]

Ok Paul and as it Xmas get you head around this one. Some areas of the UK area use 10 or 11 digits?

It ought to be enough to check that...
a) only digits are entered (strip non-digits for checking) - or allow only digits space hyphen in the input box onkeyup.
b) first digit is 0
c) total digits are 10 or 11.

[paul_wilkins]

Ok Paul and as it Xmas get you head around this one. Some areas of the UK area use 10 or 11 digits?

It ought to be enough to check that...
a) only digits are entered (strip non-digits for checking) - or allow only digits space hyphen in the input box onkeyup.
b) first digit is 0
c) total digits are 10 or 11.

After the function gets the digits, you can instead test it against a regular expression for what you need.
In this case that would be starting with a zero, followed by 9 or 10 digits.

return /0\d{9,10}/.test(digits);

[demontemplates]

After the function gets the digits, you can instead test it against a regular expression for what you need.
In this case that would be starting with a zero, followed by 9 or 10 digits.

return /0\d{9,10}/.test(digits);

So that would now be

function isTelephoneNumber(str) {
    var digits = str.replace(/[^\d]/g, '');return /0\d{9,10}/.test
    return digits.length === 11;
}

[demontemplates]

So that would now be

function isTelephoneNumber(str) {
    var digits = str.replace(/[^\d]/g, '');return /0\d{9,10}/.test
    return digits.length === 11;
}

Is thisa now correct?

[paul_wilkins]

Is thisa now correct?

Not quite. You should move that new return statement down to a new line, and then remove the old return statement.

[demontemplates]

Not quite. You should move that new return statement down to a new line, and then remove the old return statement.

Done all that and it still is not working.

[paul_wilkins]

Done all that and it still is not working.

Put up some test code at jsfiddle.net and we'll see what's going on