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": "[email protected]" };
​
        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>

Last modified 2mo ago