Insert Catchy Title Here

Dexagogo - Alert Validation Advice

I recently blogged about using Dexagago validation API with MonoRail.  The API allows you to specify your own advice messages in any HTML element.  The framework will take care of showing/hiding the element as needed during validation.  I wanted to be able to display a javascript alert box with validation messages in certain cases.  Here's what I came up with:

<script type="text/javascript">
  function AlertAdvice(isValid, el)
  {
    if( !isValid )
    { 
      alert(el.title);
      if(el.select) el.select();
    }
  }
</script>

${Form.FormTag({'action':'login','immediate':'false','stopOnFirst':'true','onElementValidate':'AlertAdvice'})}
<table>
  <tr>
    <td>${Form.LabelFor('username', 'Username')}</td>
    <td>
      ${Form.TextField('username', {'class':'required','title':'Please enter a Username'})}
      <div id="advice-username" style="visibility: hidden;" />
    </td>
  </tr>
  <tr>
    <td>${Form.LabelFor('password', 'Password')}</td>
    <td>${Form.PasswordField('password', {'class':'required'})}</td>
  </tr>
  <tr>
    <td />
    <td>${Form.Submit('Login')}</td>
  </tr>
</table>
${Form.EndFormTag()}

First we specify a javascript function 'AlertAdvice' that will be called by the validation API for each validator on our form.  If the validator fails (empty required field, alpha in a numeric field, etc) we display the contents of the title attribute, then for good measure we select the contents of the field.  When specifying your form tag you want to make sure to set immediate to false.  I found this out the hard way (took me a few tries :) otherwise you will be locked in a tight loop with a constant alert on invalid fields.  I also set stopOnFirst to true so that the user doesn't get overwhelmed with prompts for a large number of invalid fields.  Finally, we hook up our AlertAdvice function with the onElementValidate property.

You need to put the message you want displayed in the prompt in the title attribute of your field, ${Form.TextField('username', {'class':'required','title':'Please enter a Username'})} in our example above.  Finally, I wasn't able to find a way to disable the API's automatic display of an advice message.  To work around this, I add a hidden div element with a name of advice-<fieldName>. 

Lightly tested in IE6 and FF2.

posted @ Tuesday, June 26, 2007 12:18 PM