Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Tatiana CarpiucTatiana Carpiuc 

component.set('v.errors', null) doesn't work

var field1= component.find('field1');
var field2= component.find('field2');
var isValid = true;

if(!field1 || field1.get('v.value').length === 0) {
            field1.set("v.errors", [{message:"Error message"}]);
            isValid = false;
 } else {
            field1.set("v.errors", null);  //  here seems to be a problem..doesn't go to the nex line of code   
 }
if(!field2 || field2.get('v.value').length === 0) {
            field2.set("v.errors", [{message:"Error message"}]);
            isValid = false;
 } else {
            field2.set("v.errors", null);     
 }

Even both, the red border and error message, are removed doesn't go to the next line.
Someone has any idea?
Best Answer chosen by Tatiana Carpiuc
Zuinglio Lopes Ribeiro JúniorZuinglio Lopes Ribeiro Júnior
Hello Tatiana,

I not aware of how your component is exactly working but based on your code I created a component to simulate the same behavior. I've found an error with your validation but this really depends of how the whole component works and API version, perhaps, you're not getting this error.

I'm sharing my example and I kindly ask you to give a try for the changes I've done in your JS code. Please let me know if it works. Feel free to share the whole component code too so we can try to reproduce the error.

Cmp (API 39):
  
<aura:component implements="force:appHostable" >
    
    Field 1: <ui:inputText aura:id="field1"/> <br/>
    Field 2: <ui:inputTextArea  aura:id="field2"/> <br/>
    <ui:button label="Submit" press="{!c.doAction}"/>

</aura:component>

JS Controller:
  
{
    doAction : function(component) {
        var field1 			= component.find('field1');
        var field1Value 	= field1.get('v.value');
        
        var field2			= component.find('field2');
        var field2Value 	= field2.get('v.value');
        var isValid 		= true;
        
        if(!field1Value || field1Value.trim().length === 0) {
                    field1.set("v.errors", [{message:"Error message"}]);
                    isValid = false;
         } else {
                    field1.set("v.errors", null);  //  here seems to be a problem..doesn't go to the nex line of code   
         }
        
        if(!field2Value || field2Value.trim().length === 0) {
                    field2.set("v.errors", [{message:"Error message"}]);
                    isValid = false;
         } else {
                    field2.set("v.errors", null);     
         }
    }
}

Hope to have helped!

Regards.

Don't forget to mark your thread as 'SOLVED' with the answer that best helps you.

All Answers

Zuinglio Lopes Ribeiro JúniorZuinglio Lopes Ribeiro Júnior
Hello Tatiana,

When you say next line, you mean that when the statement field1.set("v.errors", null); is executed the code stops there?  Are you getting any javascript error in the browser console? 

Client-side input validation is available for the following components:
lightning:input
lightning:select
lightning:textarea
ui:input*

Your fields must be of one of these types. 

Hope to have helped!

Regards.

Don't forget to mark your thread as 'SOLVED' with the answer that best helps you.
 
Tatiana CarpiucTatiana Carpiuc
There is no error in browser ..there the code stops to execute. The fields I use are ui:inputTextArea and ui:inputText. \the problem is not on the if ..it is exactly at this line
Tatiana CarpiucTatiana Carpiuc
 field1.set("v.errors", null)
Zuinglio Lopes Ribeiro JúniorZuinglio Lopes Ribeiro Júnior
Hello Tatiana,

I not aware of how your component is exactly working but based on your code I created a component to simulate the same behavior. I've found an error with your validation but this really depends of how the whole component works and API version, perhaps, you're not getting this error.

I'm sharing my example and I kindly ask you to give a try for the changes I've done in your JS code. Please let me know if it works. Feel free to share the whole component code too so we can try to reproduce the error.

Cmp (API 39):
  
<aura:component implements="force:appHostable" >
    
    Field 1: <ui:inputText aura:id="field1"/> <br/>
    Field 2: <ui:inputTextArea  aura:id="field2"/> <br/>
    <ui:button label="Submit" press="{!c.doAction}"/>

</aura:component>

JS Controller:
  
{
    doAction : function(component) {
        var field1 			= component.find('field1');
        var field1Value 	= field1.get('v.value');
        
        var field2			= component.find('field2');
        var field2Value 	= field2.get('v.value');
        var isValid 		= true;
        
        if(!field1Value || field1Value.trim().length === 0) {
                    field1.set("v.errors", [{message:"Error message"}]);
                    isValid = false;
         } else {
                    field1.set("v.errors", null);  //  here seems to be a problem..doesn't go to the nex line of code   
         }
        
        if(!field2Value || field2Value.trim().length === 0) {
                    field2.set("v.errors", [{message:"Error message"}]);
                    isValid = false;
         } else {
                    field2.set("v.errors", null);     
         }
    }
}

Hope to have helped!

Regards.

Don't forget to mark your thread as 'SOLVED' with the answer that best helps you.
This was selected as the best answer
Tatiana CarpiucTatiana Carpiuc
You are right.. I had something in my input fields onError attribute..I removed this attribute from my fields and now it works. Thank you very much