TeddyKiller Posted May 16, 2010 Share Posted May 16, 2010 Hi. Right, I'm mega confused about this topic. Lets say we have a textbox... I believe on the textbox onchange, I'd like to validate it. A simple javascript function for that textbox, to check if the value is smaller than 4. If it is smaller, to change the class of the textbox to '.bad' else if the value is bigger than 4, to change the class of the textbox to '.good' Any ideas how I can do it? Thanks Quote Link to comment Share on other sites More sharing options...
TeddyKiller Posted May 16, 2010 Author Share Posted May 16, 2010 I sort of made a function // Check username function valUsername(FIELD) { if(FIELD.value.length < 4) { FIELD.setAttribute("class", "bad"); } else { if(FIELD.value.length > 30) { FIELD.setAttribute("class", "bad"); } else { FIELD.setAttribute("class", "good"); } } } It's alright for an offclick.. which is what it seems to do for an onchange... though I want it to execute the javascript everytime the value changes... Quote Link to comment Share on other sites More sharing options...
Psycho Posted May 17, 2010 Share Posted May 17, 2010 What is an "offclick"? You do realize that for an onchange event to take place you have to exit the field by clicking outside the field or pressing tab, right? I *think* what you are wanting is onkeyup or onkeydown. No need to add the check for length over 30 characters since you can enforce that on the textbox maxlength property. however, it look slike you are expecting a numeric value, so you could add validation for that: <html> <head> <style> .bad { background-color: 990000; } .good { background-color: 009900; } </style> <script type="text/javascript"> function valUserName(fieldObj) { fieldObj.className = (fieldObj.value<4 || isNaN(fieldObj.value)) ? 'bad' : 'good'; } </script> </head> <body> <input type="text" name="val" id="val" onkeyup="valUserName(this);" maxlength="30" /> </body> </html> Quote Link to comment Share on other sites More sharing options...
TeddyKiller Posted May 17, 2010 Author Share Posted May 17, 2010 Okay. Thanks. My mate suggested onkeyup, and that worked. I've had to change it slightly though. however, it looks like you are expecting a numeric value I don't understand? can you elaborate. Thanks. Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted May 17, 2010 Share Posted May 17, 2010 however, it looks like you are expecting a numeric value I don't understand? can you elaborate. Thanks. Say someone enters the value 'cat' into your input. How would you handle it? Quote Link to comment Share on other sites More sharing options...
Psycho Posted May 17, 2010 Share Posted May 17, 2010 Okay. Thanks. My mate suggested onkeyup, and that worked. I've had to change it slightly though. however, it looks like you are expecting a numeric value I don't understand? can you elaborate. You state you want to validate that the value is less than 4, correct? Well, if the user enters letters it is interpreted by javascript as being greaer than 4. The isNaN() validation I provided will cause validation to fail if the uesr enters anything other than a numeric value. I made an assumption that that was appropriate in your situation, but that is for you to decide. Quote Link to comment Share on other sites More sharing options...
TeddyKiller Posted May 17, 2010 Author Share Posted May 17, 2010 It states FIELD.value.length .length would be the length of the value entered. Got nothing to do with letters or numbers. It's just the value in general. Although I added in some regex for the fields. Actually.. when using this sort of validation check, it wasn't as useful as I hoped. I actually scrapped it all, saved the javascript in a spare file for future use. Thanks. Quote Link to comment Share on other sites More sharing options...
Psycho Posted May 17, 2010 Share Posted May 17, 2010 Sorry, I misread this line if(FIELD.value.length < 4) { It was late and I misread it because of the way the original logic was built. If you are using regex for character validation, then you can incorporate a length validation in that as well. In any event, it seems you only need to validate a minimum length (because, as I stated previously, you can enforce a maximum length through the maxlength field property). So, assuming you weren't doing a regex check as well, this is all you would have needed: function valUserName(fieldObj) { fieldObj.className = (fieldObj.value.length<4) ? 'bad' : 'good'; } Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.