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 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post

    Looping through form textboxes of same name

    I have a form with 10 textboxes, 2 columns fo 5. The first column is for a beginning age (textboxes are named "From"), and the second is for an ending age ("To").

    I'm working on a script to validate entered values...But I still need to do one more thing: ensure that the value in the From box is less than or equal to the value in the To box. I tried just looping through the textboxes in the form object, but I get them from left to right, and top to bottom. And there are other unrelated form elements which get mixed in.

    The form is as follows:
    Code:
    <form name="form2" method="get" action="" onsubmit="return ValidateUserAges(this);">
    ...
    <input name="From" type="text" id="From" size="10" maxlength="3" />
    <input name="To" type="text" id="To" size="10" maxlength="3" />
    ...
    (four more pairs like above)
    The JavaScript I have so far is:
    PHP Code:

    function ValidateUserAges(form) {
      var 
    numValues 0//Counts how many valid values were entered
      //For each field in the form, where the field is not empty
      
    for (var counter 0counter form.lengthcounter++) {
        
    //If it is a text field
        
    if (form[counter].type == "text" && form[counter].value != "") {
          
    //Store the current value in a variable to make it easier to refer to
          
    var curVal form[counter].value;
        
          
    //If the value of the current field is not a digit
          
    if (!IsNumber(curVal)) {
            
    //Display an alert
            
    alert("Values must be numbers");
            
    form[counter].select();
            
    //Give that field the focus
            
    form[counter].focus();
            
    //Return false
            
    return false;
          } else { 
    //The value is a number
            //If the value is not in the proper range
            
    if (curVal || curVal 999 || (curVal 90 && curVal 999)) {
              
    alert("Age must be between 0 and 90 or equal to 999");
              
    form[counter].select();
              
    form[counter].focus();
              return 
    false;
            } else { 
    //Value is a number in the proper range
              //Increment the count of valid values
              
    numValues++;
            } 
    //End of checking for number range
          
    //End of checking for whether a number or not
        
    //End of checking for whether on a text field
      
    //End of loop
        
      //If no values were submitted, prevent form submission    
      
    if (numValues == 0) {
        
    alert("You must enter at least one value");
        return 
    false;
      }
            
      
    //If reached this point, there are no errors, so return true
      
    return true;
    //End of ValidateUserAges function

    function IsNumber(value) {
        for (var 
    counter 0counter value.lengthcounter++) {
            if (!
    IsDigit(value.charAt(counter))) {
                return 
    false;
            }
      }
        
      
    //It is a number, so return true
      
    return true;
    }

    function 
    IsDigit(value) {
      var 
    digits "1234567890"
        
      
    if (digits.indexOf(value) == -1) {
        return 
    false;
      }
        
      return 
    true;

    This works insofar as it checks that ages are numbers greater than zero. But I don't know how to loop through textfields of the same name. Suggestions?

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Code:
    function ValidateUserAges(form) { 
      var froms = form.From;
      for (var i=0;i<froms.length;i++){
          alert(froms[i].value);
      }
      ...
    }
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Grant Palin
    Code:
          //Store the current value in a variable to make it easier to refer to
          var curVal = form[counter].value;
    	
          //If the value of the current field is not a digit
          if (!IsNumber(curVal)) {
            //Display an alert
            alert("Values must be numbers");
    Code:
           //Store the current value in a variable to make it easier to refer to
          var curVal = +form[counter].value;
    	
          //If the value of the current field is not a digit
          if (isNaN(curVal)) {
            //Display an alert
            alert("Values must be numbers");

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thanks glennv, that code got me going.

    What I did was set up a loop for the from fields and the to fields (one loop for each). Inside the loop, I call another function I created to validate a single age. If there's a problem, I return an error message; if not, I return an empty string. Back int he loop, if the message I retrieve is not empty, there's an error, so I display it, give the field the focus, and return false. If not, I continue.

    And thanks to neofibril for telling me about the isNaN function...I wish I had know about that so I ddin't have to write that number-checking code the first time! And what's the plus (+) sign for?

    Here's the code I have now:
    PHP Code:
    function ValidateUserAges(form) {
      var 
    from form.From;
      var 
    to form.To;
      var 
    numValues 0//Counts how many valid values were entered
      //For each field in the form, where the field is not empty
      
    for (var 0from.lengthi++) {
         
    //Store the current value in a variable to make it easier to refer to
        
    var curFrom from[i].value;
        
        if (
    curFrom != "") { //If the value is not empty
          
    var error ValidateAge(curFrom)
          if (
    error != "") { //If the error is not an empty string
            
    alert("FROM: '" error "'");
            
    from[i].select();
            
    from[i].focus();
            return 
    false;
          } else { 
    //Valid value, so continue
            
    numValues++;
          } 
    //End of checking for error
        
    //End of checking for empty values
      
    //End of from loop
      
      
    for (var 0to.lengthi++) {
         
    //Store the current value in a variable to make it easier to refer to
        
    var curTo to[i].value;
        
        if (
    curTo != "") { //If the value is not empty
          
    var error ValidateAge(curTo)
          if (
    error != "") { //If the error is not an empty string
            
    alert("TO: '" error "'");
            
    to[i].select();
            
    to[i].focus();
            return 
    false;
          } else { 
    //Valid value, so continue
            
    numValues++;
          } 
    //End of checking for error
        
    //End of checking for empty values
      
    //End of to loop
      
      //If no values were submitted, prevent form submission  
      
    if (numValues == 0) {
        
    alert("You must enter at least one value");
        return 
    false;
      }
        
      
    //If reached this point, there are no errors, so return true
      
    return true;
    //End of ValidateUserAges function

    function ValidateAge(val) {
      var 
    error "";
      
      if (
    val == "") {
        
    //If the value is empty
        
    error ""
      
    }  else if (isNaN(val)) {
        
    //If the value is not a number
        
    error "Values must be numbers";
      } else if (
    val || val 999 || (val 90 && val 999)) {
        
    //If the value is not in the proper range
        
    error "Age must be between 0 and 90 or equal to 999";
      } 
    //End of checking for number range
      
      //Return the error string (may be empty)  
      
    return error;
    //End of ValidateAge function 

  • #5
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Grant Palin
    And what's the plus (+) sign for?
    That's the unary plus operator that indicates a positive value, or a numeric cast on a non-numeric value--which is equivalent to Number(val); so when you apply that to input.value, any non-numeric characters contained in the string will result in NaN, while number-only-strings will be cast to numbers.

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by neofibril
    That's the unary plus operator that indicates a positive value, or a numeric cast on a non-numeric value--which is equivalent to Number(val); so when you apply that to input.value, any non-numeric characters contained in the string will result in NaN, while number-only-strings will be cast to numbers.
    But empty string will return 0. So if the number field is required and it is left empty, it will pass the isNaN validation.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    I see what you're saying about that. Unfortunately, 0 is an allowed value in my situation - only if the user explicitly enters it! So it won't be any good to make sure the value is greater than zero.

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by Grant Palin
    Unfortunately, 0 is an allowed value in my situation - only if the user explicitly enters it!
    That's my point. If the user leaves the field empty, this line

    var curVal = +form[counter].value;

    will return 0 to curVal

    so, if this is evaluated
    Code:
    if (isNaN(curVal)) {
            //Display an alert
            alert("Values must be numbers");
            ...
    the alert will not display since 0 is a number.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #9
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm aware of that, glenngv.

    Although it was good of you to mention it, that wouldn't have been a factor here, because above the +form[counter].value, he had:
    if (form[counter].type == "text" && form[counter].value != "")

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    I didn't see that. But it's indeed worth mentioning.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #11
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    I had thought to do that check for an empty field up by the top, since there's no point in going through all that trouble to validate an empty field...


  •  

    Posting Permissions

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