Form Validation %2D Clientside

Form Validation in ProteanCMS

For implementing form validation in your ProteanCMS application, you can utilize the following resources:

• Form Validation Documentation
• Available Validators

Steps to Integrate Form Validation

1. Add CSS for Form Validation

In your Bootstrapbase.less file, include the following import statement:

@import url("../../../ewcommon/js/jquery/formvalidation/dist/css/formValidation.min.css");

2. Update standard.xsl

This section needs to be added in the bundle.js section of standard.xsl:

<xsl:text>~/ewcommon/js/jquery/formvalidation/dist/js/formValidation.min.js,</xsl:text>       
<xsl:text>~/ewcommon/js/jquery/formvalidation/dist/js/framework/bootstrap.min.js,</xsl:text>

3. Modify Themespecific.js

In Themespecific.js, add the following line to initialize the form validation:

$('#RequestQuote.validate-clientside').formValidation()

4. Update Submission Line

Add the class validate-clientside to your submission line:

<submission method="post" action="/" id="RequestQuote" event="return form_check(this);" class="validate-clientside"/>

5. Set Data Attributes on Input Fields

Ensure to add the correct data-fv attributes to the input fields for validation. For example:

<input bind="Email" class="required" 
data-fv-notempty="true" 
data-fv-notempty-message="The email is required" 
data-fv-emailaddress="true" 
data-fv-emailaddress-message="The input is not a valid email address">
    <label>Email</label>
</input>

---

• Back to xForms Guide

---