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 3.0.0 Released

CBWIRE 3.0.0 Released

We are very excited to announce the release of version 3 of CBWIRE, our ColdBox module that makes building modern, reactive apps a breeze. This version brings with it a new component syntax, 19 enhancements and bug fixes, and improved documentation. Our biggest goal with this release was to improve the developer experience and to provide a low barrier to entry to getting started with CBWIRE.

Grant Copley
Grant Copley
May 22, 2023
ColdBox 7.0.0 Released

ColdBox 7.0.0 Released

Introducing ColdBox 7: Revolutionizing Web Development with Cutting-Edge Features and Unparalleled Performance

We are thrilled to announce the highly anticipated release of ColdBox 7, the latest version of the acclaimed web development HMVC framework for ColdFusion (CFML). ColdBox 7 introduces groundbreaking features and advancements, elevating the development experience to new heights and empowering developers to create exceptional web applications and APIs.

Designed to meet the evolving needs of modern web development, ColdBox 7 boasts a range of powerful features that streamline the development process and enhance productivity. With its robust HMVC architecture and developer-friendly tools, ColdBox 7 enables developers to deliver high-performance, scalable, and maintainable web applications and APIs with ease.

Esme Acevedo
Esme Acevedo
May 16, 2023
TestBox v5.0.0 Released!

TestBox v5.0.0 Released!


We are excited to announced the release of Testbox version 5, which brings a host of new features and improvements for developers. TestBox is a powerful and flexible tool that helps developers write comprehensive BDD/TDD tests for their applications, ensuring code quality and reducing the likelihood of bugs and errors. With TestBox v5, developers can take advantage of new features such as batch code coverage testing, improved reporting capabilities, method spies, and better integration with other tools in the Ortus suite.

These new features make TestBox even more versatile and user-friendly, and provide developers with a powerful tool for building high-quality, reliable applications.

 

Luis Majano
Luis Majano
May 11, 2023