wForms 2.0 Tutorial - Custom Error Notification

In this form, the 3 fields have the class 'required'. This instructs wForms to make sure that the fields are not empty when the form is submitted.

If one of the field is empty, by default wForms will show an alert window. For this tutorial, we want ot change this behavior. Instead we want to show the error notification at the top of the form. To see it in action, press 'submit'.

 

*
*
*

 

Here's how it's done, but first you need to install wForms.

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. It replaces the wForms default error notification function with our custom one. 

<script type="text/javascript">
  wFORMS.behaviors['validation'].showAlert = function (nbTotalErrors) {
    var placeHolder = document.getElementById('alertMessagePlaceHolder');
    placeHolder.innerHTML = wFORMS.arrErrorMsg[8].replace('%%',nbTotalErrors); 
    placeHolder.style.display = 'block';
  } 
</script>

wFORMS 2.0 CSS Styles

This should go in your CSS stylesheet. It defines the look for the error notification. 
/* Error Notification  */
#alertMessagePlaceHolder {
	background-color: #FFCCCC;
	border: 1px solid #F00;
	padding: 5px;
	display: none;
	margin: 2em 5px;
}

If you want to place this style definition 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 method="post" action="" name="wf_DemoForm" id="tutorial1" style="background-color:#FDFFF0; padding:3px; border:1px solid #ccc">
  <div id="alertMessagePlaceHolder"></div>
  <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/>
  <div style="text-align: center; margin-top:15px;"><input type="submit" value="Submit" /></div>
</form>

Note the presence of the <div id="alertMessagePlaceHolder"></div> div. This is where the message is displayed.

 

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

This tutorial shows how to change the error message displayed when wForms raises a validation error.