Results 1 to 8 of 8

Thread: Highlight form element on validation

  1. #1
    Join Date
    Feb 2008
    Posts
    77
    Thanks
    25
    Thanked 1 Time in 1 Post

    Question Highlight form element on validation

    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!

  2. #2
    Join Date
    Feb 2007
    Location
    England
    Posts
    254
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Default

    You can focus on an input element easily.
    Code:
    <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.

  3. The Following User Says Thank You to Bob90 For This Useful Post:

    johnwboyd (09-22-2008)

  4. #3
    Join Date
    Feb 2008
    Posts
    77
    Thanks
    25
    Thanked 1 Time in 1 Post

    Question thanks but...

    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.

  5. #4
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    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:
    Code:
    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.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  6. The Following User Says Thank You to rangana For This Useful Post:

    johnwboyd (09-22-2008)

  7. #5
    Join Date
    Feb 2008
    Posts
    77
    Thanks
    25
    Thanked 1 Time in 1 Post

    Default

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

    Thanks!
    Last edited by johnwboyd; 09-22-2008 at 03:23 PM.

  8. #6
    Join Date
    Aug 2007
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

  9. #7
    Join Date
    Sep 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Ralze34 View Post
    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:
    Code:
    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:
    Code:
    <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.
    Last edited by tacticious; 09-22-2008 at 10:11 PM.

  10. #8
    Join Date
    Feb 2008
    Posts
    77
    Thanks
    25
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by tacticious View Post
    JS:
    Code:
    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:
    Code:
    <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...

Bookmarks

Posting Permissions

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