This page shows you the code used to generate the form on the Custom Validation demo page.

Thank you to Michael Sammut for providing the Custom Validation demo form and code.


<cfsavecontent variable="customRules">
{
 rules: {
  email: {
   required: true,
   email: true
  },
  email2: {
   required: true,
   equalTo: "#email"
  },
  password: {
   required: true,
   minLength: 5
  },
  password2: {
   required: true,
   equalTo: "#password"
  }
 },
 messages: {
   email: {
   required: "Please provide an email"
  },
  email2: {
   required: "Please provide enter your email",
   equalTo: "Please enter the same email as above"
  },
  password: {
   required: "Please enter a password.  There is a 5 character minimum",
   minLength: "You must enter 5 characters at minimum"
  },
  password2: {
   required: "Please enter a password",
   equalTo: "Please enter the same password as above"
  }
 }
}
</cfsavecontent>
<div id="wrap">
 <div class="cfUniForm-form-container">
  <!--- 
   The opening tag demonstrates optional attributes to do the following:
    1) determine where to place the error messages [valid options: top, inline, both, none]
    2) have the tag library load jQuery and the following jQuery plugin prerequisites: 
     a) validation plugin
     b) validationSetup (Load in custom validation.  cfUniform will accept any type of jQuery validation.  Please see example below.)
   --->
  <uform:form action="#cgi.script_name#" 
     id="myDemoForm" 
     errors="#errs#" 
     errorMessagePlacement="both" 
     submitValue=" Sign Me Up " 
     loadjQuery="true" 
     loadValidation="true"
     validationSetup="#customRules#">
   
   <uform:fieldset legend="Required Fields">
    <input type="hidden" name="foo" value="1" />
    <uform:field label="Email Address" 
       name="email" 
       isRequired="true" 
       type="text" 
       hint="Note: Your email is your username.  Use a valid email address." />
       
    <uform:field label="Re-enter Email Address" 
       name="email2" 
       isRequired="true" 
       type="text" 
       hint="Note: Please re-type your email." />
    
    <uform:field label="Choose Password" 
       name="password" 
       isRequired="true" 
       type="password" /><!--- for security purposes, we don't populate the password --->
    
    <uform:field label="Re-enter Password" 
       name="password2" 
       isRequired="true" 
       type="password" /><!--- for security purposes, we don't populate the password --->  
   </uform:fieldset>
  </uform:form>
 </div>
</div>