SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Enthusiast demontemplates's Avatar
    Join Date
    Feb 2007
    Location
    United Kingdom
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form Validation help please

    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

    Code:
    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; }

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by demontemplates View Post
    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.

    Code javascript:
    var digits = form.elements.rd_Mobile_Number.replace(/[^\d]/g, '');
    if (digits.length != 11) {
        ...
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast demontemplates's Avatar
    Join Date
    Feb 2007
    Location
    United Kingdom
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    You can get the digits from the telephone field using a regular expression, then check that it's the allowed length.

    Code javascript:
    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?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by demontemplates View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by demontemplates View Post
    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:

    Code javascript:
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Enthusiast demontemplates's Avatar
    Join Date
    Feb 2007
    Location
    United Kingdom
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HI Paul

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

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by demontemplates View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Enthusiast demontemplates's Avatar
    Join Date
    Feb 2007
    Location
    United Kingdom
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again paul, but thats my hurdle. I have no idea in how to acheive this?

  9. #9
    SitePoint Enthusiast demontemplates's Avatar
    Join Date
    Feb 2007
    Location
    United Kingdom
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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");
    }
    }

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by demontemplates View Post
    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()

    Code javascript:
    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

    Code:
    {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.

    Code:
    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;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Enthusiast demontemplates's Avatar
    Join Date
    Feb 2007
    Location
    United Kingdom
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, your a top bloke, many thanks

  12. #12
    SitePoint Enthusiast demontemplates's Avatar
    Join Date
    Feb 2007
    Location
    United Kingdom
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by demontemplates View Post
    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.

    Code javascript:
    return /0\d{9,10}/.test(digits);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Enthusiast demontemplates's Avatar
    Join Date
    Feb 2007
    Location
    United Kingdom
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    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.

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

    So that would now be

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

  15. #15
    SitePoint Enthusiast demontemplates's Avatar
    Join Date
    Feb 2007
    Location
    United Kingdom
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by demontemplates View Post
    So that would now be

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

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by demontemplates View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  17. #17
    SitePoint Enthusiast demontemplates's Avatar
    Join Date
    Feb 2007
    Location
    United Kingdom
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    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.

  18. #18
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by demontemplates View Post
    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
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •