www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] Validating a Checkbox

  1. #1
    Join Date
    Oct 2010
    Posts
    18

    resolved [RESOLVED] Validating a Checkbox

    Hey all,

    You may see a few posts from me over the next few days. I'm building a custom validator and I will have questions to ask Todays little gem...more of a question of opinion rather than help i guess

    I have the checkbox validation. I have it set onClick, this works perfectly with both the mouse click and also if the space bar is used to select the option, which is great. However if a user simply 'tabs' over the option it doesn't validate real time. The solution I came up with was adding a onKeyDown event to trigger the same function. Would this be a correct solution or is there another more correct answer?

    Code:
    <input type="checkbox" id="M_TERMS" name="M_TERMS" value="1" onClick="vldTERMS(this.id);" onKeyDown="vldTERMS(this.id);">

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Consider using event delegation, rather than inline events.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Oct 2010
    Posts
    18
    OK, that's interesting, thanks for the reply. I didn't want to come back until I had looked in to that method. It is indeed very nice.

    I've editted this post because between now and the time i posted I found the concept of adding the event listener, never thought of that before.

    However I have received some funky functionality while testing so I will let you know if there is another issue.

    I thought I would post the code in case anyone else was interested, plus if this doesn't look 100&#37; to you guys and gals please YELL at me, hehe, no seriously your input is ALWAYS appreciated. And the project needs to be the best it can be.

    Code:
    			document.addEventListener('keyup',function(event){
    
    				//IE doesn't pass in the event object
    				event = event || window.event;
    				
    				//IE uses srcElement as the target
    				var target = event.target || event.srcElement;    
    				
    				var strId = target.id
    				
    				switch(target.id){
    					case "M_FIRSTNAME":
    					   emptyField(strId,"* Please enter your 'First Name'.");
    						validChars(strId,Letters,"* Your 'First Name' contains invalid characters.");
    					   break;
    				}
    			},true);
    			
    			document.onclick = function(event){
    				//IE doesn't pass in the event object
    				event = event || window.event;
    				
    				//IE uses srcElement as the target
    				var target = event.target || event.srcElement;    
    				
    				var strId = target.id
    				
    				switch(target.id){
    					case "M_TERMS":
    					   validCheckbox(strId,"* Please accept our Terms and Conditions.");
    					   break;
    					//others?
    				}
    			};
    Last edited by jukesie; 10-21-2010 at 08:13 AM.

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Why validate "M_FIRSTNAME" after every character input? Surely onblur.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Oct 2010
    Posts
    18
    Firstly, I should've known that something here would break in IE, been testing in FF assuming (yes I know the phrase about Ass+U+Me, lol) that IE would accept it, damn it. So need to work around the addEventListener, which i'm looking at now.

    I want the validation to work as the users type, displaying a tick/cross for incorrect input, which at the moment in FF works sweetly, onBlur only runs the validation after the element lost focus(I know you know this) that isn't how I wanted to make this work.

    M_FIRSTNAME is only the id of 1 field, I have several 'cases' that refer to different fields in the form, I did this because some have different functions to run, plus they all have custom error messages to be relaid to the user.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles