Jump to content

Recommended Posts

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

Link to comment
https://forums.phpfreaks.com/topic/201910-javascript-validate-field/
Share on other sites

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...

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>

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.

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.

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';
}

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.