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.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Feb 2004
    Location
    Manitoba, CANADA
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts

    validating form fields in correct sequence

    Hi everyone!!!! I have this script below. What I need is to make it "break" and focus on the first text field that is invalid. Right now, it alerts the user to the error of their ways but does not focus on the first incorrectly filled out field - it stops at whatever field is the last to be filled out incorrectly rather than stopping at each incorrectly filled out field in sequence. How can I make it guide the user through the improperly filled out fields and then, when all the fields are filled in correctly, alert("Thank you!!");? Would I use an onblur in the respective text fields? I tried this but it immediately forces the user to correct their mistake rather than waiting until the button is pushed which, in this situation, needs to happen before the form is checked for validity. Any suggestions? Thanks very much.


    Code:
    <html>
    <script language="javascript">
    
    function checkname(){
    var information=document.form5;
    		if(!isNaN(information.name.value)==true)
    		{	
    		alert("Please enter a valid name - letters only");
    			information.name.focus();
    			information.name.select();
    			return false;
    		}
    }
    function checkphone(){
    var information=document.form5;
    		if(information.phone.value.match(/^[0-9]{3}-[0-9]{4,}$/))
         		{
    	        	return true
         		}
    		else
         		{
    		alert("Please enter a valid 7 digit telephone number (xxx-xxxx).");
    			information.phone.focus();
    			information.phone.select();
    			return false;
         		}
    }
    
    function checkcity(){
    var information=document.form5;
    		if((information.city.value<3)||(information.city.value>9)==true);
    		{
    		alert("Please enter a valid city - no less than 3 letters, no more than 9.");
    			information.city.focus();
    			information.city.select();
    			return false;
    		}
    }
    
    
    </script>
    <BR><FONT color=green size=5>Part 5 </FONT><BR>10 marks<BR>
    <form name="form5">
    <TABLE align=center>
      <TBODY>
      <TR>
        <TD>
          <UL>
            <LI>enter a name (letters only)<input type="text" name="name"> 
            <LI>enter a phone number in ###-#### format<input type="text" name="phone"> 
            <LI>enter a city (no less than 3 letters and no more than 9)<input type="text" name="city"> 
            <LI>after entering data use this <input type=button value=button onClick="checkname(); checkphone(); checkcity()"> to 
            validate the data 
            <LI>if ok display message "Thank You" 
            <LI>if any field(s) are incorrect or not filled in then: 
            <OL>
              <LI>display an alert stating which is the first incorrect field that 
              needs to be corrected. 
              <LI>highlight or place the cursor in the first incorrect field for 
              correction. </LI></OL></LI></UL></TD></TR></TBODY></TABLE>
    </html>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Looks rather like a homework assignment to me.
    See:-

    http://www.codingforums.com/showthread.php?t=2090

    You tell us your solution, I am sure someone will then comment on or correct it.

  • #3
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I fixed it up for you, so this should work for you:
    Code:
    <script language="javascript">
    
    function validateForm() {
     if(!checkname()) {
      return false;
     }
     else if(!checkphone()) {
      return false;
     }
     else if(!checkcity()) {
      return false;
     }
     else {
      alert("Thank you.");
     }
    }
    
    function checkname() {
     var information=document.form5;
     if(!isNaN(information.name.value)==true) {	
      alert("Please enter a valid name - letters only");
      information.name.focus();
      information.name.select();
      return false;
     }
    		
     return true;
    }
    
    function checkphone() {
     var information=document.form5;
     if(information.phone.value.match(/^[0-9]{3}-[0-9]{4,}$/)) {
      return true
     }
     else {
      alert("Please enter a valid 7 digit telephone number (xxx-xxxx).");
      information.phone.focus();
      information.phone.select();
      return false;
     }
    }
    
    function checkcity(){
     var information=document.form5;
     if( (information.city.value.length < 3) || (information.city.value.length > 9)) {
      alert("Please enter a valid city - no less than 3 letters, no more than 9.");
      information.city.focus();
      information.city.select();
      return false;
     }
    		
     return true;
    }
    
    </script>
    Some of your functions weren't returning true, and your city function wasn't working at all because of a semi-colon right after your if statement.

    I created a function called validateForm() which calls each of your functions in order, and kicks out if one of them fail -- leaving the user at the appropriate field.

    If you have any further troubles, just post back.

    Hope that helps,
    Sadiq.

  • #4
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There are generally two types of people- ones that simply dump their entire page or problem and expect everyone to spend hours solving everything for them, and those that do their own homework first, and only ask very specific, manageable questions.
    Well she did do the majority of the work... I just tweaked it and solved her problem. Hope I don't get in trouble!

    Sadiq.

  • #5
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    who you quoting?


    and some usefull comments, only validating to 1st invalid field is annoying to users(me), instead validate all fields and focus in the 1st wrong.

  • #6
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sad69
    Well she did do the majority of the work... I just tweaked it and solved her problem. Hope I don't get in trouble!

    Sadiq.
    Yes I agree, Lisa has always posted her code that she is working with and has never posted just the question and ask someone to do her work. As far as I'm concerned, she studies hard and has come a long way in her studies.

    Lisa;

    FWIW: As Sad pointed out, you need one function to validate your inputs and I would like to add that you started using regular expressions to validate the form fields and then switched up.

    You name validation although using isNaN will work to disallow numerics, it will allow alt characters thru. The same with your city validation.

    Below is an example of your requirements using regular expressions.
    (which I am still struggling with also).

    Code:
    <html>
    <head>
    <script type="text/javascript">
    
      function validate(form){
        if(!form.name.value.match(/[a-z]$/gi)){ 
           alert("Please enter a valid name - letters only");
           form.name.focus();
           form.name.select();
           return false;
        }
    
        if(!form.phone.value.match(/^[0-9]{3}-[0-9]{4}$/)){
           alert("Please enter a valid 7 digit telephone number (xxx-xxxx).");
           form.phone.focus();
           form.phone.select();
           return false;
        }
    
        if(!form.city.value.match(/^[a-z]{3,9}$/gi)){
           alert("Please enter a valid city - no less than 3 letters, no more than 9.");
           form.city.focus();
           form.city.select();
           return false;
        }
    
        else{ return true };
      }
    </script>
    </head>
    
    <body>
    <BR><FONT color=green size=5>Part 5 </FONT><BR>10 marks<BR>
    <form name="form5" onsubmit="return validate(this)">
    <TABLE align=center>
      <TBODY>
      <TR>
        <TD>
          <UL>
            <LI>enter a name (letters only)<input type="text" name="name"> 
            <LI>enter a phone number in ###-#### format<input type="text" name="phone"> 
            <LI>enter a city (no less than 3 letters and no more than 9)<input type="text" name="city"> 
            <LI>after entering data use this <input type="submit" value="Submit"> to 
            validate the data 
            <LI>if ok display message "Thank You" 
            <LI>if any field(s) are incorrect or not filled in then: 
            <OL>
              <LI>display an alert stating which is the first incorrect field that 
              needs to be corrected. 
              <LI>highlight or place the cursor in the first incorrect field for 
              correction. </LI></OL></LI></UL></TD></TR></TBODY></TABLE>
    </body>
    </html>
    Also, please note that the language declaration has been deprecated and you should be using type instead.

    .....Willy

  • #7
    New Coder
    Join Date
    Feb 2004
    Location
    Manitoba, CANADA
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, it is a homework assignment and yes I did ask for help. I don't want anyone to do my homework for me. I am taking my course online and I don't have the luxury of a teacher or class readily available to me to ask questions of or have discussions with . I have a book and the internet. I tried quite a few different ways of working it out and I couldn't get it to work so I thought that I would ask. I posted the whole script because I thought it would be easier to understand. My apologies if I have misused the forum. Next time I will be sure to only post EXACTLY what I am looking for and wait for questions. Further discussion or a nudge in the right direction would have been help enough. That is all I was looking for.

    p.s. Thanks sad69.

  • #8
    New Coder
    Join Date
    Feb 2004
    Location
    Manitoba, CANADA
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Willy. I am confused with regular expressions as well but am trying to figure them out. We are not supposed to be learning them yet but sometimes it seems that that is the only thing that would be suitable(?) Also, I keep using the language declaration as that is what the teacher is teaching. Any scripts that he provides are all written in this manner and I am just going along with what he is teaching. I guess if its no longer acceptable, I will switch as you have suggested. Thank you for your help and encouragement.

  • #9
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Don't worry about it Lisa.
    If you need help, do not hesitate to post again. In fact, many others could learn from your example on how to post a question!

    You have always precisely explained what you were trying to do and what has not worked as well as posting enough of the relevant code so that someone could run your codes to see what was going on. Many people say they have tried this or that but either do not provide any code or dump their entire page code including 12k of irrelevant code because they were to lazy to isolate the problem.

    Stick around;
    .....Willy


  •  

    Posting Permissions

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