5 useful jquery form validation

http://denbagus.net/useful-jquery-form-validation/

Truly Useful Form Validation Scripts for Front End Development

http://www.tripwiremagazine.com/ajax/developer-toolbox/truly-useful-form-validation-scripts-for-front-end-development.html

Populate and validate JSF selectOneMenu

Using a backing bean or Seam component (on JBoss), you can easily populate a JSF selectOneMenu (JSF dropdown box server-side control):

<h:selectonemenu id="lstRating" value="#{asset.rating}" required="true" requiredMessage="Rating is required.">
  <f:selectitems value="#{asset.ratingItems}" />
</h:selectonemenu>
<rich:message for="lstRating" styleclass="errors" />

In this example, you have a selectOneMenu with id of lstRating. It gets its SelectItem elements from the asset.ratingItems property on the backing component. The selected item is stored in asset.rating.

  private String rating;
  private ArrayList<SelectItem> ratingItems = null;

  public ArrayList<SelectItem> getRatingItems(){
    ratingItems = new ArrayList<SelectItem>();
    ratingItems.add(new SelectItem(null,"Select One..."));
    ratingItems.add(new SelectItem("TV-Y", "TV-Y"));
    ratingItems.add(new SelectItem("TV-Y7", "TV-Y7"));
    ratingItems.add(new SelectItem("TV-G", "TV-G"));
    ratingItems.add(new SelectItem("TV-PG", "TV-PG"));
    ratingItems.add(new SelectItem("TV-14", "TV-14"));
    ratingItems.add(new SelectItem("TV-MA", "TV-MA"));

    return ratingItems;
  }

  public String getRating(){
    return this.rating;
  }

  public void setRating(String rating){
    this.rating = rating;
  }

In the above code, we declare an ArrayList of SelectItem object type. The getRatingItems() property instantiates the ratingItems ArrayList and populates it with SelectItem objects. Note the first SelectItem has a null value; if the user leaves the dropdown box to this item, the required validator will detect it as a blank value and throw a validation error.

New Article for Adobe Developer Connection

Please check out my new Flex article on the Adobe Developer Connection.

Update: You can write articles for Adobe by checking out their Author Guidelines page.

Flex Validator Error Message Issue - Found Solution

Flex's validators are great but they're a little too subtle in notifying the user of errors: They mark the error field on the form with a red border. If you roll over the field, you'll see the error in a red tooltip. Why not have an option to display the validation error when it occurs, instead of having to mouse over to see it?

Well, here's a solution by Steven Gemmen. When you detect the error, dispatch an event to fool the field into thinking there's been a mouseover. Of all the solutions I've seen, this is the best/easiest.

The only problem I've run into is that the ValidationResultEvent's field property is null, even though the field has thrown the error. So I'm storing the source property in the subfield, generated from a custom validator,

  _results.push(new ValidationResult(true, super.source.toString().substring(super.source.toString().lastIndexOf(".")+1), "BadFileName", _errorMessage));  
  return _results;

Not elegant, but it fixes the issue. Back on the page, I call the custom validator's Validate() method manually and receive the ValidateResultEvent.

  if (results.type == ValidationResultEvent.INVALID){
    var val:ValidationResult = results.results;
    setValidationFocus(val.subfield);
  }

This calls the function to activate the error tooltip,

  private function setValidationFocus(objName:String):void{
   var frmObj:TextInput = this[objName];
 
   frmObj.setFocus();
   frmObj.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OVER));
  }

Now to figure out why I'm not able to get the field property. Also, how do you remove the tooltip when the user clicks into the field?