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 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Validate field entry based on another non-blank field entry

    I have a form that I need to be able to say that if a first name was entered the Last name is required. I understand the premise is to get the length of c1FName and if is not = to zero and to get the length of c1LName and if it is = to zero, then display the message. I do not want to use Alert as popups can become quite annoying.

    Code:
     function validateRegEx(regex, input, helpText, helpMessage) {
            // See if the input data validates OK
            if (!regex.test(input)) {
              // The data is invalid, so set the help message and return false
              if (helpText != null)
                helpText.innerHTML = helpMessage;
              return false;
            }
            else {
              // The data is OK, so clear the help message and return true
              if (helpText != null)
                helpText.innerHTML = "";
              return true;
            }
          }
     
    //code to evaluate whether a first name has been entered and if a last name is required.
    function validateCand1Lname(inputField, helpText) {
    	// See if the Lname input value contains at minLength but no more than maxLength characters
          if ((document.getElementById("c1fname").value.length > 0) & (document.getElementById("c1lname").vlaue.length == 0)) {
    	    return validateRegEx(/.+/,
              inputField.value.length, helpText,
              "Please enter a value");
    	  }
    }
    This is the html where I am passing the inputField to ValidateCand1Lname and displaying the help message.

    Code:
    <label class="label">Last Name:</label> <input class="lninput" maxlength="35" size="35" name="c1lname" type="text"  onblur="validateCand1Lname(this, document.getElementById('c1Lname_help'))" />
            <span id="c1Lname_help" class="help"></span>
    Unfortunately, I understand enough about coding to get me into trouble, but am eager to learn more.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    
    function ckname(frm,fn,ln,w,m){
     w=document.getElementById(w);
     if (frm[fn].value.replace(/\s/g,'').length>0&&frm[ln].value.replace(/\s/g,'').length<1){
      w.innerHTML=m;
      return false;
     }
     w.innerHTML='';
     return true;
    }
    
    </script>
    
    </head>
    
    <body>
    <form >
    First Name <input name="firstname" />
    <br />
    Last Name <input name="lastname" /><span id="warning" ></span>
    <br />
    <br />
    <input type="button" name="" value="Test" onmouseup="ckname(this.form,'firstname','lastname','warning','Enter Last Name');" />
    </form>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    dsmith100303 (02-06-2014)

  • #3
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Vic, this worked, but I am not sure I am understanding all of the code you provided. For instance, w=document.getElementById(w);, I don't know where document.getElementById(w) is coming from. Also I am not sure what the replace function is doing, replace(/\s/g,'')

    Thank you very much for your assistance

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    w is the third parameter passed to the function so when called using ckname(this.form,'firstname','lastname','warning','Enter Last Name') it is set to 'warning' - that provides the id of the tag in the HTML where the message is to be displayed.

    replace(/\s/g,'') replaces all whitespace characters - tab, space, new-line, carriage-return, vertical-space, null etc with an empty string - that is it removes those characters from the field. If you don't do that then entering any whitespace into the first or last name field will result in it being considered to have been entered and so someone could have a first name of ' ' or ' ' and it would insist on their last name being supplied.

    An alternative to using replace(/\s/g,'') which strips out all of the whitespace would be to use trim() which only removes leading and trailing spaces.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    dsmith100303 (02-06-2014)

  • #5
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    How would I validate that the zipcode is not blank if the first name was entered and that the zip code has 5-digits? I am getting a syntax error on Dreamweaver on what I have below and suspect that it has to do with the \s as a zipcode has numbers and not text, in the US.

    Code:
        
      function ckCand1Zip(Candidates,c1fname,c1zip,w,m){
     w=document.getElementById(w);
     if (Candidates[c1fname].value.replace(/\s/g,'').length>0&&Candidates[c1zip].value.replace(/\s/g/^\d{5}$/,'').length<1){
      w.innerHTML=m;
      return false;
     }
     w.innerHTML='';
     return true;
    }

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    I think you might have to do that in two hits...
    Code:
    function ckCand1Zip(Candidates,c1fname,c1zip,w,m){
     w=document.getElementById(w);
     var tmp=Candidates[c1zip].value.replace(/\s/g,'');
     if (Candidates[c1fname].value.replace(/\s/g,'').length>0&&tmp.length<1|| !(/(^\d{5}$)/).test(tmp)){
      w.innerHTML=m;
      return false;
     }
     w.innerHTML='';
     return true;
    }

  • #7
    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 vwphillips View Post
    Code:
    <input type="button" name="" value="Test" onmouseup="ckname(this.form,'firstname','lastname','warning','Enter Last Name');" />
    Using onmouseup on the button to validate the form is very uncommon and not good. If user uses keyboard to hit the button, the onmouseup event will not be triggered. You typically use a submit button and validate the form on onsubmit event.
    Glenn
    ____________________________________

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

  • #8
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    When I apply the code provided by xelawho,
    Code:
    function ckCand1Zip(Candidates,c1fname,c1zip,w,m){
     w=document.getElementById(w);
     var tmp=Candidates[c1zip].value.replace(/\s/g,'');
     if (Candidates[c1fname].value.replace(/\s/g,'').length>0&&tmp.length<1|| !(/(^\d{5}$)/).test(tmp)){
      w.innerHTML=m;
      return false;
     }
     w.innerHTML='';
     return true;
    }
    I get my warning1Zip if I don't enter 5 numbers. However, when I go back and enter the 5 numbers, my warning1Zip message does not clear. I am setting all of my scripts up initially to check onblur, but will also use a function at the end, to make sure the fields, if required are filled in. I do have this script working on all of the previous fields that are required if the first name is filled in.
    Code:
      <label class="ziplb">Zip Code:</label> <input class="zip" maxlength="10" size="10" name="c1zip" id="c1zip" type="text" onblur="ckCand1Zip(this.form,'c1fname','c1zip','warning1Zip','     Please Enter their 5-Digit Zip');" />  <br />
    <span id="warning1Zip" ></span>

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    mmm... works for me. can you post the html (or relevant section thereof) that you are using?

  • #10
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    The full line of html is in my previous post, but here is the call function onblur="ckCand1Zip(this.form,'c1fname','c1zip','warning1Zip',' Please Enter their 5-Digit Zip');"

  • #11
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    right. sorry to make you work so hard. This is what I'm testing with, which seems to work as expected...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    
    function ckCand1Zip(Candidates,c1fname,c1zip,w,m){
     w=document.getElementById(w);
     var tmp=Candidates[c1zip].value.replace(/\s/g,'');
     if (Candidates[c1fname].value.replace(/\s/g,'').length>0&&tmp.length<1|| !(/(^\d{5}$)/).test(tmp)){
      w.innerHTML=m;
      return false;
     }
     w.innerHTML='';
     return true;
    }
    
    </script>
    
    </head>
    
    <body>
    <form >
    First Name <input name="c1fname" />
    <br />
    Last Name <input name="lastname" /><span id="warning" ></span>
    <br />
    <br />
    
    <label class="ziplb">Zip Code:</label> <input class="zip" maxlength="10" size="10" name="c1zip" id="c1zip" type="text" onblur="ckCand1Zip(this.form,'c1fname','c1zip','warning1Zip','     Please Enter their 5-Digit Zip');" />  <br />
    <span id="warning1Zip" ></span>
    </form>
    </body>
    
    </html>

  • Users who have thanked xelawho for this post:

    dsmith100303 (02-09-2014)

  • #12
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    My apologies, I did not understand what you were asking for.

    Whether I use your code or mine, if I enter a 5 digit zip code I get my warning message. Also if I enter something other than 5 digits I get the expected warning message and then when I enter the 5 digits, the error message does not clear. I do have the code working for the last name and city.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type="text/javascript" >  
      function ckCa1Lm(Candidates,c1fname,c1lname,w,m){
     w=document.getElementById(w);
     if (Candidates[c1fname].value.replace(/s/g,'').length>0&&Candidates[c1lname].value.replace(/s/g,'').length<1){
      w.innerHTML=m;
      return false;
     }
     w.innerHTML='';
     return true;
    }
    
    function ckCand1City(Candidates,c1fname,c1city,w,m){
     w=document.getElementById(w);
     if (Candidates[c1fname].value.replace(/s/g,'').length>0&&Candidates[c1city].value.replace(/s/g,'').length<1){
      w.innerHTML=m;
      return false;
     }
     w.innerHTML='';
     return true;
    }
    
    function ckCand1Zip(Candidates,c1fname,c1zip,w,m){
     w=document.getElementById(w);
     var tmp=Candidates[c1zip].value.replace(/s/g,'');
     if (Candidates[c1fname].value.replace(/s/g,'').length>0&&tmp.length<1|| !(/(^d{5}$)/).test(tmp)){
      w.innerHTML=m;
      return false;
     }
     w.innerHTML='';
     return true;
    }
    
    
      </script>
    
    
    
    </head>
    <body>
    <form id="Candidates" method="post">
     </fieldset> <fieldset><legend>Candidate 1</legend><label>First Name:</label> <input class="fninput" maxlength="35" size="35" name="c1fname" id="c1fname" type="text" /> <br />
      <br />
      
      <label class="label">Last Name:</label> <input class="lninput" maxlength="35" size="35" name="c1lname" type="text" onblur="ckCa1Lm(this.form,'c1fname','c1lname','warningc1Lm','Please Enter their Last Name');" /> 
      
              <span id="warningc1Lm" style="color:#FF0000"></span>
      <br /><br />
     <label class="label ">City:</label> <input class="ctinput" maxlength="35" size="35" name="c1city"  id="c1city" type="text"  onblur="ckCand1City(this.form,'c1fname','c1city','warning1City','Please Enter their City');" /> 
      
      <input class="wi" maxlength="2" size="2" name="c1state" value="WI" type="text" /> 
      
    <label class="ziplb">Zip Code:</label> <input class="zip" maxlength="5" size="10" name="c1zip" id="c1zip" type="text" onblur="ckCand1Zip(this.form,'c1fname','c1zip','warning1Zip','     Please Enter their 5-Digit Zip');" />  <br />
    <span id="warning1Zip" ></span>  <br />
      <span id="warning1City" style="color:#FF0000"></span>

  • #13
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you for getting me on the right path.

    I changed the if c1fname is greater than 0 && temp.length to !==5. Now the code gives me an error message if it is less than 5 digits and the first name is grater than 0. I might not need the last part, but the code is working now and I do want to see digits and not letters.

    Code:
     
     /*the w accepts the 3rd value (warning1Zip) from the onblur="ckCand1Zip(this.form,'c1fname','c1zip','warning1Zip','     Please Enter their 5-Digit Zip');" 
     */
    function ckCand1Zip(Candidates,c1fname,c1zip,w,m){
     w=document.getElementById(w);
     var tmp=Candidates[c1zip].value.replace(/\s/g,'');
     if (Candidates[c1fname].value.replace(/\s/g,'').length>0&&tmp.length!==5|| (/(^\d{5}$)/).test(tmp)){
      w.innerHTML=m;
      return false;
     }
     w.innerHTML='';
     return true;
    }

  • #14
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Validating Radio buttons onblur

    I have been trying to figure out how to validate whether one of the two option buttons is selected if the first name is provided. Ultimately, I will have 9 names that can be added to this form, so using onblur validation will be extremely helpful. I think my logic could be missing the "!", because I need to know if the buttons are NOT checked.

    I have my validation code:
    Code:
     function ckCand1Radio(Candidates,c1fname,c1Member,c1previous_member,w,m){
     w=document.getElementById(w);
     
     	if (Candidates[c1fname].value.replace(/\s/g,'').length>0 && (document.getElementById('c1RadioYes').checked)) {
    	}else if (Candidates[c1fname].value.replace(/\s/g,'').length>0 && (document.getElementById('c1RadioNo').checked)){
    		
     
    
    		  w.innerHTML=m;
    		  return false;
    	 }
    		 w.innerHTML='';
    		 return true;
    	}
    I am not sure how to apply onblur to the radio buttons because a mousedown/up or keydonw/up is required to make either selected. So I somehow thought that a fieldset would work, but to no avail.

    Code:
     <fieldset id="c1Member" onblur="ckCand1Email(this, document.getElementById('warning1member'))" >
      <Legend>This candidate is currently or has previously served as a board member: </Legend>
     Yes <input type="radio" name="c1previous_member" id="c1RadioYes" value="Yes" /> 
      No <input type="radio" name="c1previous_member" id="c1RadioNo" value="No" />
      <span id="warning1member" class="help" style="color:#FF0000"> </span> 
      </fieldset>
    Does anyone have a way to make this work? Right now I am not getting an error message whether or not I check the buttons. Your patience with my inexperience is appreciated.


  •  

    Tags for this Thread

    Posting Permissions

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