Lightning Components Developer’s Guide
jNewer Version Available
Validating Fields
Default Error Handling
The framework can handle and display errors using the default error component, ui:inputDefaultError. The following example shows how the framework handles a validation error and uses the default error component to display the error message.
Component source
1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:component>
18 Enter a number: <ui:inputNumber aura:id="inputCmp"/> <br/>
19 <ui:button label="Submit" press="{!c.doAction}"/>
20</aura:component>
21Client-side controller source
1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17{
18 doAction : function(component) {
19 var inputCmp = component.find("inputCmp");
20 var value = inputCmp.get("v.value");
21
22 // Is input numeric?
23 if (isNaN(value)) {
24 // Set error
25 inputCmp.setValid("v.value", false);
26 inputCmp.addErrors("v.value", [{message:"Input not a number: " + value}]);
27 } else {
28 // Clear error
29 inputCmp.setValid("v.value", true);
30 }
31 }
32}
33When you enter a value and click Submit, an action in the controller validates the input and displays an error message if the input is not a number. Entering a valid input clears the error. The controller invalidates the input value using setValid(false) and clears any error using setValid(true). You can add error messages to the input value using addErrors().
Custom Error Handling
ui:input and its child components can handle errors using its onError and onClearErrors attributes, which are wired to your custom error handlers defined in a controller. onError maps to a ui:validationError event, and onClearErrors maps to ui:clearErrors. The input components can use the ui:updateError event to update the default error component, ui:inputDefaultError.
The following example shows how you can handle a validation error using custom error handlers and display the error message using the default error component.
Component source
1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:component>
18 Enter a number: <ui:inputNumber aura:id="inputCmp" onError="{!c.handleError}" onClearErrors="{!c.handleClearError}"/> <br/>
19 <ui:button label="Submit" press="{!c.doAction}"/>
20</aura:component>
21Client-side controller source
1swfobject.registerObject("clippy.codeblock-3", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17{
18 doAction : function(component, event) {
19 var inputCmp = component.find("inputCmp");
20 var value = inputCmp.get("v.value");
21
22 // is input numeric?
23 if (isNaN(value)) {
24 // fire event that will set error
25 var errorEvent = inputCmp.getEvent("onError");
26 errorEvent.setParams({ "errors" : [{message:"Input not a number: " + value}]});
27 errorEvent.fire();
28 } else {
29 // fire event that will clear error
30 var clearErrorEvent = inputCmp.getEvent("onClearErrors");
31 clearErrorEvent.fire();
32 }
33 },
34
35 handleError: function(component, event){
36 var inputCmp = component.find("inputCmp");
37 var errorsObj = event.getParam("errors");
38
39 /* do any custom error handling
40 * logic desired here */
41
42 // set error using default error component
43 inputCmp.setValid("v.value", false);
44 inputCmp.addErrors(errorsObj);
45 var updateErrorEvent = inputCmp.getEvent("updateError");
46 updateErrorEvent.fire();
47 },
48
49 handleClearError: function(component, event) {
50 var inputCmp = component.find("inputCmp");
51
52 /* do any custom error handling
53 * logic desired here */
54
55 // clear error using default error component
56 inputCmp.setValid("v.value", true);
57 var updateErrorEvent = inputCmp.getEvent("updateError");
58 updateErrorEvent.fire();
59 }
60}
61When you enter a value and click Submit, an action in the controller executes. However, instead of letting the framework handle the errors, you have to provide a custom error handler using the onError attribute in the component. If the validation fails, doAction adds an error message using setParams() and fires your custom error handler. In the custom event handler, handleError, retrieve the errors by calling getParam() and invalidate the input value using setValid(false). You can fire the updateError event to update the default error component.
Similarly, you can customize how you want to clear the errors by using the onClearErrors event. See the handleClearError handler in the controller for an example.