wForms 2.0 Demo - Custom Field Validation

The 3 fields in the form below all have the class 'required', so wForms will perform a basic validation that ensures that the fields are not empty.

Here though we also need to make sure that the same value is entered in the password and confirmation fields. This tutorial will show you how to do it.

*
*
*

 

wFORMS Installation

This code goes in your page's <HEAD> element. It installs the wForms library and enables the default validation behavior. 

<script type="text/javascript" src="/wForms/v2.0/modules/wforms_core.js" ></script>
<script type="text/javascript" src="/wForms/v2.0/modules/wforms_validation.js" ></script>

 

Custom Code

This code goes in the <HEAD> element, just after the two lines above.

The code replaces the wForms default validation routine by a custom function ("doPostBack"). When 'doPostBack' is executed, the default validation is first executed and then the field values are checked. 

<script type="text/javascript">
  wFORMS.functionName_formValidation = "doPostBack";
  function doPostBack(e) { 
    if(!e) e = window.event;    
    
    //  call the default error management.  
    if(wFORMS.behaviors['validation'].run(e)) {            
      //  doing our custom validation here:

      // if needed, the form element can be obtained with:
      // var f = wFORMS.helpers.getSourceElement(e);

      var passwordField = document.getElementById('password');
      var confirmField  = document.getElementById('confirmPassword');
              
      if(passwordField.value != confirmField.value) {
        // passwords don't match, show error message:
        var errorMessage = "The passwords don't match.";
        wFORMS.behaviors['validation'].showError(confirmField, errorMessage);
        // we need to prevent the submission:
        return wFORMS.helpers.preventEvent(e);     
      }
      // otherwise all is good, 
      return true;                        
  }
</script>

wFORMS 2.0 CSS Styles

This should go in your CSS stylesheet. It defines the look for the error message and the field in error. 
.errMsg {
	color: red;
	display: inline;
}
.errFld {
	border-color: red;
}

If you want to place it directly in your html, make sure to enclose it in a <style type="text/css"> tag.


HTML Code

For reference, here's the HTML for the form above: 
<form>
<label for="username" id="username-L" class="preField">Your Name :</label>
<input type="text" id="username" name="username" value="" class="required"/>
*<br/>
<label for="password" id="password-L" class="preField">Your Password:</label>
<input type="password" id="password" name="password" value="" class="required"/>
*<br/>
<label for="confirmPassword" id="password-L" class="preField">Confirm Password:</label>
<input type="password" id="confirmPassword" name="confirmPassword" value="" class="required"/>
*<br/>
<input type='submit' value='submit' />
</form>

 

Notes

If you need to call the validation routine from javascript, don't use the form.submit() approach, as it will not trigger the 'onSubmit' event and therefore bypass the validation alltogether. Instead call directly:

doPostBack(formElement);
Where the function parameter is the form element (as in document.forms[0]).

 

For questions or comments regarding this tutorials, please go to the wForms discussion board.

This tutorial shows how to add custom code on top of the default validation that wForms performs.