Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Mar 2008
    Posts
    37
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Form Validation Trouble

    Hi Guys.

    I'm trying to validate a phone number field in a form. It sounds stupid but I have made three radio buttons - Fax, Mobile, Landline.

    Each radio button is too have a regular expression attached to it.

    I have made a function:

    Code:
    function checkPhone(fieldObj)
    {
    var result = false;
    var mobileFormat = /^(?:\([0-9]\d{2}\)\ ?|[0-9]\d{2}(?:\-?|\ ?))[0-9]\d{2}[- ]?\d{3,4}$/;
    var phoneFormat = /^(\+)?([-\._\(\) ]?[\d]{3,20}[-\._\(\) ]?){2,10}$/;
    var faxFormat = /^(\+)?([-\._\(\) ]?[\d]{3,20}[-\._\(\) ]?){2,10}$/;
    if (myform.type[0].checked == false)
    	{
    		if (phoneFormat.test(fieldObj))
    		{
    			result = true;	
    		}
    	}
    if (myform.type[1].checked == false)
    	{
    		if (mobileFormat.test(fieldObj))
    		{
    			result = true;	
    		}
    	}
    if (myform.type[2].checked == false)
    	{
    		if (faxFormat.test(fieldObj))
    		{
    			result = true;	
    		}
    	}
    else {
    	result = false;
    }
    	return result;
    }
    I have called it in the first if below. The second If relates to the radio buttons which are in an array called type:

    Code:
    else if (checkPhone(myform.phoneF.value)) //check phone number using checkphone function
    	{
    		myform.phoneF.focus(); //cursor focus on phone field
    		document.getElementById("error5").innerHTML = "Invalid"; //display error message at the id value  
    		return false; //stops the form being submitted
    	}
    	else if (myform.type[0].checked == false && myform.type[1].checked == false && myform.type[2].checked == false ) //check radiobutton selected
    	{
    		document.getElementById("error6").innerHTML = " Required"; //display error message at the id value  
    		return false; //stops the form being submitted
    	}
    If I have left something out do let me know what you would like to know. I'm a new programmer so I wouldn't be surprised if I am not even on the right track :P

    Thanks for help in advance.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    There is little point in excessive validation of the format of a telephone number, when the user can simply enter it incorrectly (e.g. digits transposed).

    I would settle for something simpler and in practice just as effective:

    if (/(^[0-9\s\-\+]{10,})$/gi.test(lstr.value)) { /// telephone number, only digits, space, hyphen and plus sign allowed. Minimum of 10 characters.

    BTW, the time to say "thanks" is afterwards, not beforehand which gives the impression that you take other people's unpaid assistance for granted. Or as British politician Neil Kinnock put it, "Don't belch before you have had the meal." Prefer to use "please" beforehand and if you find a response helpful then you can use the "Thank You For This Post" button.

  • #3
    New Coder
    Join Date
    Mar 2008
    Posts
    37
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I couldn't agree more with the excessive validation . But it's a requirement in a project I'm doing.

    If it was up to me I would do it exactly as you stated it my friend.

    I'm stumped. I have spent the last 4 hours trying to make this work and no luck.

    I would greatly appreciate any help.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    What is it exactly you are trying to achieve?

    That is, what exactly is the format for each type of number you are wanting?

    Too many conditionals are pointless;-

    var faxFormat = /^(\+)?([-\._\(\) ]?[\d]{3,20}[-\._\(\) ]?){2,10}$/;
    just means anything from 3 to 20 digits returns true.

    So does
    +-12345678912345678912----------

    ?: look ahead is valid in Perl but not in JavaScript.

    Be aware that a space is \s, multiple spaces \s+
    Last edited by Philip M; 04-29-2008 at 08:42 AM.

  • #5
    New Coder
    Join Date
    Mar 2008
    Posts
    37
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I have three radio buttons.

    One radio button has an expression attached to it.

    If the user has selected the Mobile Radio Button, there entry into the field must be a valid mobile number. If not I don't want the form submitted.

    Here's the HTML:

    Code:
    <p>
              <label for="phone">Phone No:</label>
              <span class="element">
              <input type="text" size="31" name="phoneF" value="" /> *
              <span id="error5"></span></span></p>
            <p>
              <label for="phonetype">Phone No. Type:</label>
              <span class="element">
              <input type="radio" value="Landline" name="type" />
              Landline *<br />
              <input type="radio" value="Mobile" name="type" />
              Mobile<br />
              <input type="radio" value="Fax" name="type" />
              Fax
              <span id="error6"></span></span></p>

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by haydo View Post
    I have three radio buttons.

    One radio button has an expression attached to it.

    If the user has selected the Mobile Radio Button, there entry into the field must be a valid mobile number. If not I don't want the form submitted.
    I asked you to spell out what you want the regex to validate.

    That is, what (in your opinion) is a valid mobile number, and more importantly what is not a valid mobile number. It is essential to identify invalid as well as valid formats.

    Example: Check for 5 digits:-

    if (/\d{5}/,test(field.value)) {

    returns true for 12345, but also for 1234567 or 123456abc or abc1234567

    What is in fact wanted is probably 5 digits and nothing but:-

    if (/^\d{5}$/,test(field.value)) {

    A mobile phone number starts with 07 so:-

    mobile = mobile.replace(/[^0-9]/g,""); // strip non-digits
    if (/^(07)[0-9]{8,}$/.test(mobile)) { // test 07 followed by 8 or more digits

    It is far better to strip out non-digits at the outset than to attempt to allow for hyphens, spaces, dots or whatever which may well appear in the wrong position.


    It is your responsibility to die() if necessary….. - PHP Manual
    Last edited by Philip M; 04-29-2008 at 09:12 AM.

  • #7
    New Coder
    Join Date
    Mar 2008
    Posts
    37
    Thanks
    4
    Thanked 0 Times in 0 Posts
    To make it easy for others to understand as I'm probably confusing.

    I am trying to validate a PHONE NUMBER.

    The user enters a phone number in a field and then selects a radio button which the number applies to: ie mobile fax landline.

    I have made an array of radio buttons called "type" - refer to my code.

    How can I make a function which assigns an expression to a radio button which then validates the number that the user entered into the field.

    In short - I need three separate expressions to 3 radio buttons and a function which checks the field.

    I have tried and failed. Help me

  • #8
    New Coder
    Join Date
    Mar 2008
    Posts
    37
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Sorry.

    Landline/Phone and Fax could be (03)344-4444 and could also validate as 033592915. Anything else is invalid

    Mobile could be 027-254-7346 or 027-254-734 and could also validate as 0272547346 or 027254734. 8 or 9 digits is valid, anything else is invalid.

    I found those expressions in a Regex library as I didn't think I could do it myself.

    Does that make sense? Thank you for your help so far and your paitence.

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    You are wanting to validate USA(??) numbers. Is this wise as it will prevent non-USA people from contacting you. In the UK mobile numbers start with 07.

    I have given you the basic regex formula above. First of all, strip all non-digits. Then adjust the regex to suit:-

    mobile = mobile.replace(/[^0-9]/g,""); // strip non-digits
    if (/^(07)[0-9]{6,7}$/.test(mobile)) { // test 07 followed by 6 or 7 digits

    landline = landline.replace(/[^0-9]/g,""); // strip non-digits
    if (/^(03)[0-9]{7}$/.test(landline)) { // test 03 followed by 7 digits
    Last edited by Philip M; 04-29-2008 at 09:23 AM. Reason: typo

  • Users who have thanked Philip M for this post:

    haydo (04-29-2008)

  • #10
    New Coder
    Join Date
    Mar 2008
    Posts
    37
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I'm actually trying to validate some New Zealand numbers.

    Thanks for help on the regex

    Do you have any ideas on the function I need to create or remodel the existing ones?

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    I have re-written the whole thing for you:-
    Code:
    <form name = "myform">
    LANDLINE <input type = "radio" name = "rad1" value = "0"><br>
    MOBILE <input type = "radio" name = "rad1" value = "1"><br>
    FAX <input type = "radio" name = "rad1" value = "2"><br>
    <input type = "text" name = "phone" size = "20" onblur = "checkPhone(this)">
    </form>
    
    
    <script type = "text/javascript">
    
    function checkPhone(fieldObj) {
    var valid = false;
    num = fieldObj.value;
    num = num.replace(/[^0-9]/g,""); // strip non-digits
    var message = "Not a valid phone number - please re-enter!"
    var selection = -1;
    for (var i = 0; i < document.myform.rad1.length; i++) {
    if (document.myform.rad1[i].checked) {
    selection = document.myform.rad1[i].value;
    }
    }
    
    if (selection == -1) {
    alert ("You have not selected a phone type!");
    return false;
    }
    
    if (selection == 0 || selection == 2) {
    if (/^(03)[0-9]{7}$/.test(num)) { // test landline or fax 03 followed by 7 digits
    valid = true;
    }
    else {
    alert (message);
    document.myform.phone.value = "";
    return false;
    }
    }
    
    if (selection == 1) {
    if (/^(02)[0-9]{6,7}$/.test(num)) { // test mobile 02 followed by 6 or 7 digits
    valid = true;
    
    }
    else {
    alert (message);
    document.myform.phone.value = "";
    return false;
    }
    }
    
    return valid;
    }
    
    </script>
    Note that if no phone type is selected the user must again place focus on the textbox to trigger the onblur event once again. You can help overcome this by making (say) landline the default selected, which means of course that you can cut out the test.
    Last edited by Philip M; 04-29-2008 at 10:41 AM. Reason: Typo

  • Users who have thanked Philip M for this post:

    haydo (04-29-2008)

  • #12
    New Coder
    Join Date
    Mar 2008
    Posts
    37
    Thanks
    4
    Thanked 0 Times in 0 Posts
    That works great! Thanks so much!

    How would I go about adjusting your code to suit the rest of my form?

    Instead of the message boxes I have been using an inner HTML effect which adds a required to missing fields.

    Here is the code below:
    Code:
    function checkData() 
    {
    	//get the form name by its element
    	var myform = document.getElementById("form1");
    	//clear the error messages using counter
    	for (var j=1;j<10;j++) {
    		document.getElementById("error"+j).innerHTML = "";
    	}
    	if (emptyField(myform.fNameF)) //check valid first name field using emptyField function  
    	{
    		myform.fNameF.focus(); //cursor focus on first name field
    		document.getElementById("error1").innerHTML = " Required"; //display error message at the id value  
    		return false; //stops the form being submitted
    	}
    	else if (emptyField(myform.lNameF)) //check valid last name using emptyField function
    	{
    		myform.lNameF.focus(); //cursor focus on last name field
    		document.getElementById("error2").innerHTML = " Required"; //display error message at the id value  
    		return false; //stops the form being submitted
    	}
    	else if (emptyField(myform.addressF)) //check valid last name using emptyField function
    	{
    		myform.addressF.focus(); //cursor focus on last name field
    		document.getElementById("error3").innerHTML = " Required"; //display error message at the id value  
    		return false; //stops the form being submitted
    	}
    	else if (checkEmail(myform.emailF)) //check email value using checkEmail function
    	{
    		myform.emailF.focus(); //cursor focus on email field
    		document.getElementById("error4").innerHTML = "Invalid"; //display error message at the id value  
    		return false; //stops the form being submitted
    	}
    	else if (myform.type[0].checked == false && myform.type[1].checked == false && myform.type[2].checked == false ) //check radiobutton selected
    	{
    		document.getElementById("error5").innerHTML = " Required"; //display error message at the id value  
    		return false; //stops the form being submitted
    	}
    	else if (checkPhone(myform.phoneF.value)) //check phone number using checkphone function
    	{
    		myform.phoneF.focus(); //cursor focus on phone field
    		document.getElementById("error6").innerHTML = "Invalid"; //display error message at the id value  
    		return false; //stops the form being submitted
    	}
    	else if (myform.subject[0].checked == false && myform.subject[1].checked == false && myform.subject[2].checked == false ) //check radiobutton selected
    	{
    		document.getElementById("error7").innerHTML = " Required"; //display error message at the id value  
    		return false; //stops the form being submitted
    	}
    	else if (emptyField(myform.message))
    	{
    		myform.message.focus();
    		document.getElementById("error8").innerHTML = " Required"; //display error message at the id value  
    		return false; //stops the form being submitted
    	}
    	else if (myform.check.checked == false) //check checkbox selected
    	{
    		document.getElementById("error9").innerHTML = " Required"; //display error message at the id value  
    		return false; //stops the form being submitted
    	}
    	else if (myform.contact.selectedIndex == 0) //check selection value selected
    	{
    		document.getElementById("error10").innerHTML = " Required"; //display error message at the id value  
    		return false; //stops the form being submitted
    	}
    	else
    	{
    		return true; //submits the form 
    	}
    }
    I understand what you have done. I can understand if you tell me to piss off LOL. You have done more than enough.

    Thanks again

  • #13
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by haydo View Post
    I understand what you have done. I can understand if you tell me to piss off LOL. You have done more than enough.
    Thanks again
    Thank you for your expressed appreciation. The object of this forum is to help people who have specific Javascript problems. There is a fairly fine distnction between that and acting as a free coding service.

    In short, I think the time has come to make an effort yourself, as it is obvious that you have not written this code yourself but merely copied it from somewhere.

    If you have further problems (not the same as "Do it all for me!") please feel free to come back. I or someone else will be happy to help.

  • #14
    New Coder
    Join Date
    Mar 2008
    Posts
    37
    Thanks
    4
    Thanked 0 Times in 0 Posts
    FYI - I actually did code that myself .

    It would be merely impossible me for to find a form I have tried to make. As stated earlier whats the point in those radio buttons - I have never seen anybody with this.

    I did have a specific problem also. I also made an effort to code it myself but failed hence why I came on here for suggestions.

    The purpose of my post was to, if possible, adjust the code I already had.

    BTW I asked HOW would I go about adjusting your code to work with mine, not please code it for me

  • #15
    New Coder
    Join Date
    Mar 2008
    Posts
    37
    Thanks
    4
    Thanked 0 Times in 0 Posts
    The more I think about it. Why wouldn't a simple for loop work like the one i made here?

    It looks fine to me but It doesn't work but can you see what is wrong with it or why it wouldn't work?

    Code:
    function checkPhone(fieldObj)
    {
    var phoneFormat = /^(\+)?([-\._\(\) ]?[\d]{3,20}[-\._\(\) ]?){2,10}$/;
    var faxFormat = /^(\+)?([-\._\(\) ]?[\d]{3,20}[-\._\(\) ]?){2,10}$/;
    var mobileFormat = /^(?:\([0-9]\d{2}\)\ ?|[0-9]\d{2}(?:\-?|\ ?))[0-9]\d{2}[- ]?\d{3,4}$/;
    var result = true;
    for (i=0; i<3; i++;)
    {
    	if (document.myform.type[i].checked = true)
    	{
    		if (phoneFormat.test(fieldObj)) //check landline number with regular expression
    		{
    			result = false;
    		}
    		else if (mobileFormat.test(fieldObj)) //check mobile number with regular expression
    		{
    			result = false;
    		}
    		else if (faxFormat.test(fieldObj)) //check fax number with regular expression
    		{
    			result = false;
    		}
    		else
    		{
    			result = true;	
    		}
    	}
    	return result;
    }


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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