Validation
You can define constraints within your wires using
this.constraints
.component extends="cbwire.models.Component"{
this.constraints = {
"task": { required: true }
};
// Data Properties
data = {
"task": ""
};
}
Returns a
ValidateResult
object.component extends="cbwire.models.Component"{
// Action
function addTask() {
var result = validate(); // ValidateResult object
if ( !result.hasErrors() ) {
queryExecute( ... );
}
}
}
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.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" }
}
);
}
}
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