Win a copy of Mesos in Action this week in the Cloud/Virtualizaton forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Dynamically changing an inputText field's background color based on user input

 
Rob Phair
Greenhorn
Posts: 3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hello, all,

The project that I am currently working on includes a requirement to validate an input field on the fly, as the user is typing. The idea is as follows:

- When the user begins typing in the field, the background color should change from the default white to yellow.
- When the user has typed a valid sequence of characters, the field should change back to white.
- If the user continues to enter further input, and that invalidates the string, the field should change back to yellow.

The project is being built with JSP, and I am using the <h:inputText> tag for my text box. As I'm very new to JSP, I am wondering if there is a simple solution involving an ActionListener or EventListener of some kind that I can use to implement this functionality. Has anyone here ever put something together like this?

I appreciate any help you can offer, including even a simple "there's no way you will get that to work." I just need to know if it's possible or not. Thanks in advance!
 
Ben Souther
Sheriff
Posts: 13411
Firefox Browser Redhat VI Editor
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The behavior you're describing needs to be written in the client code, (HTML/Javascript) not the server side (JSP/Struts).

I'm going to move this to our HTML/Javascript forum for you.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64843
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Originally posted by Rob Phair:
The project is being built with JSP, and I am using the <h:inputText> tag for my text box.

<h:whatever> is not any standard JSP tag. Is this perhaps a JSF project? If so, it's important to state that.

As Ben pointed out, that something that needs to be done on the client, not the server.
If we were to ignore whatever snags that the use of JSF throws into the mix, this is a simple matter of placing a few JavaScript event listeners on the field and manipulating its CSS based upon its current value.
 
Anirvan Majumdar
Ranch Hand
Posts: 261
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I'm just wondering, may be you can use the onkeydown event attribute of the textbox to invoke a JavaScript method, which can run the set of validations and set the textbox's backgorund colour accordingly.
As Bear says, <h:inputText/> is not a standard tag, so you'll have to see that your <h:inputText/> tag does support the "onkeydown" event attribute. If it does, then perhaps you can validate the text at the client side itself instead of engaging the server.
 
Vilmantas Baranauskas
Ranch Hand
Posts: 89
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Can you perform validation of value on the client-side? If yes, simple JavaScript would be sufficient.

If no, you may still implement validation using AJAX.
 
Consider Paul's rocket mass heater.
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic