Highlight form element on validation

[johnwboyd]

I was wondering if I could have the invalid field that the cursor jumps to highlight the way it does if you select/ tab it?
I used the script found here: http://www.dynamicdrive.com/dynamici...hlightform.htm

Here's the page with the form: http://www.leadexcel.com/ez/apply.asp

Here's the js which validates the form: http://www.leadexcel.com/ez/JScript1_https.js

Thanks in advance!

[Bob90]

You can focus on an input element easily.

<input type="text" id="test" value="field" onfocus="this.style.bakgroundColor='red'" onblur="this.style.bakgroundColor='white'">

If you want to select all the text too you can do that, but I'm sure it's been covered on DD before.

[johnwboyd]

Can you please be more specific as to exactly where I'd put that and how for my js or css so that all the drop down lists and fields would highlight upon clicking the submit button and that field being invalid/ blank?

Thanks so much.

[rangana]

You have the validation already, what's missing is for you to let it highlight. For example, this part in your JS, find validateForm function:

if (strPayFreq == "NONE")
	{
		alert("Please select a pay frequency.") ;
		location.href="#PAY";
		document.ApplicationForm.PayPeriod.focus();
		document.ApplicationForm.style.backgroundColor='lightyellow';
		return ;
	}

...try to add highlighted.

This should go all the way out on your if statement just under it.

Hope that makes sense.

[johnwboyd]

Is there a way to apply this to the entire form instead of individually to each field? That code highlighted the entire table.

Thanks!

[Ralze34]

I am looking to do something similar to this. However, I was hoping to perform the validation and field highlight dynamically and not use the submit. So when the user fills out the information and clicks on the next form field or tabs over it checks the info and if it is wrong changes the color.

[tacticious]

I am looking to do something similar to this. However, I was hoping to perform the validation and field highlight dynamically and not use the submit. So when the user fills out the information and clicks on the next form field or tabs over it checks the info and if it is wrong changes the color.

JS:

validate(field, responseid){
    var vfield = document.getElementById(field);
    var res = document.getElementById(responseid);
    if(vfield.value > 99 || vfield.value < 12){
        vfield.style.backgroundColor='red';
        res.innerHTML = "This is not a valid age!";
    }
}

Form:

<input id="age" type="text" onblur="javascript:validate('age','agetxt');"><div id='agetxt'></div>

Apply the validation script to check the value of textbox1, then upon changing to the next field it'll run. This will highlight the textbox itself. Then, in the div (agetxt) it will give them a response and inform the user what they did wrong. You can also take it a step further and make the JS script re-focus on the textbox being validated. Of course, in the JS script, unless you want to make a function for each field you'll probably want to make another parameter. The new parameter ideally would determine what type of value to compare with (age, email, address, name, etc.).

This is completely untested and might not work as is, but it should give the idea.

[johnwboyd]

JS:

validate(field, responseid){
    var vfield = document.getElementById(field);
    var res = document.getElementById(responseid);
    if(vfield.value > 99 || vfield.value < 12){
        vfield.style.backgroundColor='red';
        res.innerHTML = "This is not a valid age!";
    }
}

Form:

<input id="age" type="text" onblur="javascript:validate('age','agetxt');"><div id='agetxt'></div>

Apply the validation script to check the value of textbox1, then upon changing to the next field it'll run. This will highlight the textbox itself. Then, in the div (agetxt) it will give them a response and inform the user what they did wrong. You can also take it a step further and make the JS script re-focus on the textbox being validated. Of course, in the JS script, unless you want to make a function for each field you'll probably want to make another parameter. The new parameter ideally would determine what type of value to compare with (age, email, address, name, etc.).

This is completely untested and might not work as is, but it should give the idea.

I dunno about this one chief. I got an error ; expected and it didn't work. Maybe I did something wrong...