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

CBWIRE 2.2 Released

CBWIRE 2.2 Released

We're excited to announce the release of CBWIRE 2.2. This release includes several added enhancements, such as new lifecycle hooks and simplified Turbo Drive integration. We changed the previous lifecycle hook of mount() to onMount() to be consistent, and several bugs were squashed.

Maria Jose Herrera
Maria Jose Herrera
January 09, 2023
FORGEBOX v7.1.0 Released

FORGEBOX v7.1.0 Released

We are so happy to announce a minor release for our package management system. In this release, we take care of some bug fixes reported and a lot of work for our elastic search engine. Now better search results with an improved response time. We have updated our core modules to the latest versions for better security and performance.

Javier Quintero
Javier Quintero
December 30, 2022
Favorite 2022 Ortus Content

Favorite 2022 Ortus Content

2022 was quite the year. For us, it was all about delivering exceptional content and service to our amazing community of developers. That's why we updated our tools, released new products, and announce upcoming projects and initiatives we are working on for 2023.

We know 2023 will be awesome but 2022 was amazing too. Read on and don't miss anything, review the top content we released in 2022 and improve your projects in 2023. Happy New Year!

Maria Jose Herrera
Maria Jose Herrera
December 29, 2022