Validation

Wires include powerful validations that you can use to validate your Data Properties.

Validations are provided by cbValidation.

Defining Constraints

You can define constraints within your wires using this.constraints.

component extends="cbwire.models.Component"{

    this.constraints = {
        "task": { required: true }
    };
    
    // Data Properties
    data = {
        "task": ""
    };
}

Validating

Actions can validate against the defined constraints using validate() or validateOrFail().

validate

Returns a ValidateResult object.

component extends="cbwire.models.Component"{
    // Action
    function addTask() {
        var result = validate(); // ValidateResult object
        
        if ( !result.hasErrors() ) {
            queryExecute( ... );
        }
    }
}

validateOrFail

Silently fails and prevents further processing of the current Action.

component extends="cbwire.models.Component"{
    // Action
    function addTask() {
        validateOrFail();

        queryExecute( ... );        
    }
}

With validateOrFail(),the error is gracefully caught and any further processing of the invoked action is prevented. The XHR response and re-rendered template are still returned. The actual errors themselves are available to the template using args.validation.

If you need more granular control over the validation response, use validate() instead.

Validation Manager

You can get a new ValidationManager object to work with, just call getValidationManager();

component extends="cbwire.models.Component"{
    // Action
    function addTask() {
        var data = { "email": "[e-mail]" };

        var validationManager = getValidationManager();
        
        var result = validationManager.validate(
            target=data,
            constraints={
                "email": { required: true, type: "email" }
            }
        );
    }
}

Displaying Errors

Templates can access the ValidationResults object using args.validation. This includes helpful methods you can use for displaying error messages.

<cfoutput>
<div>
    <input wire:model="task" type="text">
    <button wire:click="addTask">Add</button>
    
    <cfif args.validation.hasErrors( "task" )>
        <cfloop array="#args.validation.getAllErrors( "task" )#" index="error">
            <div>#error#</div>
        </cfloop>
    </cfif>
</div>
</cfoutput>