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,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Code:
    function ValidateUserAges(form) { 
      var froms = form.From;
      for (var i=0;i<froms.length;i++){
          alert(froms[i].value);
      }
      ...
    }

  • #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,043
    Thanks
    0
    Thanked 251 Times in 247 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.

  • #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,043
    Thanks
    0
    Thanked 251 Times in 247 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.

  • #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,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    I didn't see that. But it's indeed worth mentioning.

  • #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
    •