Blog

Form Validation with CBWIRE

Grant Copley December 19, 2022

Spread the word

Grant Copley

December 19, 2022

Spread the word


Share your thoughts

Form validation is something we as developers have to deal with all the time, and there are plenty of ways to go about it, some elegant and others not so much. ColdBox has a validation module called cbValidation for powerful form validation. We have this available to us in CBWIRE as well, which allows us to build forms with instant validation and messaging for the user without any page refreshing.

As we begin typing into our input field, we want the UI to immediately start validating, like this.

Once we've entered a valid email address, we want the validation error to go away.

Clicking 'Add Email' should show a success message.

This is quick to achieve with CBWIRE, and we don't need to write any JavaScript to do it.

Building Our UI Component

Let's create a UI component for our form. We'll call it EmailForm.cfc.

// Path: /wires/EmailForm.cfc
component extends="cbwire.models.Component" {

    this.constraints = {
        "email": { required: true, type: "email" }
    };

    data = {
        "email": "",
        "success": false
    };

    function addEmail() {
        validateOrFail();
        data.success = true;
    }
}

We can define what Data Properties we want to validate by defining this.constraints in our component.

    this.constraints = {
        "email": { required: true, type: "email" }
    };

Every time our component is updated, CBWIRE will look for these constraints and perform validation on them if they exists.

Notice we can also call validateOrFail() within our component actions. This will perform an additional validation and if there are any validation errors, prevent further processing.

    function addEmail() {
        validateOrFail();
        data.success = true;
    }

Now, let's add our UI Template.

<!--- Path: /views/wires/emailform.cfm --->
<cfoutput>
<div>
    <input wire:model="email" type="text" placeholder="Enter your email">
    <button wire:click="addEmail">Add Email</button>

    <cfif args.success>
        <div>Success!</div>
    </cfif>

    <cfif args.validation.hasErrors( "email" )>
        <cfloop array="#args.validation.getAllErrors( "email" )#" index="error">
            <div class="alert alert-danger mt-2">#error#</div>
        </cfloop>
    </cfif>
</div>
</cfoutput>

Notice that within our CBWIRE template, we have args.validation available to us. This is a validation result object that is returned from cbValidation.

<cfif args.validation.hasErrors( "email" )>

We are able to use any methods available to us on that validation result object, including hasErrors() and getAllErrors().

Using Our Component

Now we can include our email form anywhere we need it by using the wire() method.

<cfoutput>
<html>
    <head>
        <title>...</title>
        #wireStyles()#
    </head>
    <body>
        <!--- Include our EmailForm component here --->
        #wire( "EmailForm" )#
    </body>

    #wireScripts()#
</html>
</cfoutput>

That's really it. All of the validation features of cbValidation we have available to us, and with CBWIRE we can validate our forms instantly and reactively as users are entering in data.

Examples

As always, the docs is the best place to learn more about CBWIRE and it's validation features. https://cbwire.ortusbooks.com/component-features/validation

You can find this example as well as many others in our CBWIRE examples repo at https://github.com/grantcopley/cbwire-examples.

Go build something awesome!

Add Your Comment

Recent Entries

Ortus Solutions Soars Back to CFCamp Munich as Platinum Sponsor and Keynote Presenter!

Ortus Solutions Soars Back to CFCamp Munich as Platinum Sponsor and Keynote Presenter!

We're thrilled to announce that Ortus Solutions is returning to CFCamp Munich for another year! We're incredibly proud to be a continuing sponsor of this fantastic event and can't wait to connect with the ColdFusion community once again.

Taking Center Stage with the Day 1 Keynote

Get ready for some deep dives into the world of BoxLang! Ortus Solutions will be kicking off CFCamp with a dynamic keynote address on day 1. This is your chance to gain valua...

Cristobal Escobar
Cristobal Escobar
May 28, 2024
Into the Box 2025 - Blind Tickets are Out!

Into the Box 2025 - Blind Tickets are Out!

Ortus Solutions is thrilled to announce the release of blind tickets for Into the Box 2025, the premier event for web developers. This year's conference promises to be a game-changer, especially with the unveiling of our groundbreaking new product, BoxLang. **Our team is working hard to get all modern CFML developers amazing tools and software features to improve their productivity. **

Maria Jose Herrera
Maria Jose Herrera
May 27, 2024
Into the Box - Keynote Recap Day 1

Into the Box - Keynote Recap Day 1

Day 1 of Into the Box kicked off with an electrifying keynote session that set the tone for an incredible conference. The excitement was palpable as developers, tech enthusiasts, and industry leaders gathered to explore the latest innovations and trends in web development.

Maria Jose Herrera
Maria Jose Herrera
May 24, 2024