WFFM required field (For disclaimer / T&C) that support custom error message in sitecore checkbox (MVC Edition)

Requirement:

  • Stop user from submitting WFFM form when the checkbox field in the form is marked as required.
  • Add the ability to change the “required” error message (ie: this field is required is not particularly user friendly when it comes to T&C).

Tested in:
WFFM Version: Web Forms for Marketers 2.4 rev. 151103
Sitecore Version: Sitecore.NET 7.2 (rev. 151021)

Add CheckboxField ViewModel file to your solution. 

Make sure that this file is deployed to:
[WebsiteFolder]\Views\Form\EditorTemplates\CheckboxField.cshtml.

You can either get the original cshtml from the original WFFM package or by pasting the following code or you can skip this step or save time and add the code from the next step instead:

@using Sitecore.Forms.Core.shell.Core.Data
@using Sitecore.Forms.Mvc.Html
@model Sitecore.Forms.Mvc.ViewModels.Fields.CheckboxField

@using (Html.BeginField())
{
    var cssclass = Model.FormType == FormType.Inline ? "checkbox-inline" : "checkbox";
<div class="@cssclass">
        <label>
            @Html.CheckBoxFor(x => Model.Value)
            @Html.BootstrapText("Title")
        </label></div>

}
Change the file to:
@using Sitecore.Forms.Core.shell.Core.Data
@using Sitecore.Forms.Mvc.Html
@model Sitecore.Forms.Mvc.ViewModels.Fields.CheckboxField

@{
    var errorMessage = Model.Parameters.ContainsKey("checkboxrequirederrormessage") && !String.IsNullOrEmpty(Model.Parameters["checkboxrequirederrormessage"]) ? Model.Parameters["checkboxrequirederrormessage"] : "This field is required";
}
<style>
    .wffmChkValidation.field-validation-valid {
        display: none;
    }
</style>

@using (Html.BeginField())
{
    var cssclass = Model.FormType == FormType.Inline ? "checkbox-inline" : "checkbox";
<div class="@cssclass">
        <label>
                @if (Model.IsRequired)
                {
                    @Html.CheckBoxFor(x => Model.Value, new { @required = "required" })
                }
                else
                {
                    @Html.CheckBoxFor(x => Model.Value)
                }
                @Html.BootstrapText("Title")
        </label>
@Html.ValidationMessageFor(x => x.Value, @errorMessage, new { @class = "wffmChkValidation validation-msg" })</div>

}

Usages:

Find the field item in sitecore. This is usually located in [WFFMFormName]/[SectionName]/[Field Name]

Add the following to the Localized Parameter section:

 <Checkbox Required Error Message>Your Error Message</Checkbox Required Error Message>
Potential Improvement:
  • This code is using HTML 5’s required attribute. This would not work on browser that does not support HTML5s.
  • The code can also be improved to support dynamic message (ie “TOC for {0} has to be agreed”).
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: