function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
ShanmukaShanmuka 

Text field should be red boarder based on condition

Hi ,
In lightning i have one requirement, the text field should be hielight with red boarder based on condition ,please help me .

Thanks 
S.Shanmuka
Best Answer chosen by Shanmuka
Ajay K DubediAjay K Dubedi
Hi Shanmuka,

You can use below code. 

<<<<---Component--->>>> 
<aura:component >
    <aura:attribute name="name" type="String"/>
    <aura:attribute name="isColor" type="boolean" default="true"/>
    
    <aura:if isTrue="{!v.isColor}">
        <lightning:input type="text" value="{!v.name}" label="Enter a Name" />
        <aura:set attribute="else">
            <div>
                <lightning:input type="text" value="{!v.name}" class="color" label="Enter a Name" />
            </div>
        </aura:set>
    </aura:if>
    <lightning:button variant="brand" label="Brand action" title="Brand action" onclick="{! c.handleClick }" />
</aura:component>

<<<<<----Controller---->>>> 
({
    handleClick : function(c, e, h) {
        var namevalue = c.get("v.name");
        if(namevalue == undefined || namevalue.trim() == ""){
            c.set("v.isColor", false);
        }else{
            c.set("v.isColor", true);
        }
    }
})

<<<<----Style---->>>> 
.THIS {
}
.THIS .color .slds-input{
    border: 1px solid red;
}

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Ajay Dubedi
www.ajaydubedi.com

All Answers

Ajay K DubediAjay K Dubedi
Hi Shanmuka,

You can use below code. 

<<<<---Component--->>>> 
<aura:component >
    <aura:attribute name="name" type="String"/>
    <aura:attribute name="isColor" type="boolean" default="true"/>
    
    <aura:if isTrue="{!v.isColor}">
        <lightning:input type="text" value="{!v.name}" label="Enter a Name" />
        <aura:set attribute="else">
            <div>
                <lightning:input type="text" value="{!v.name}" class="color" label="Enter a Name" />
            </div>
        </aura:set>
    </aura:if>
    <lightning:button variant="brand" label="Brand action" title="Brand action" onclick="{! c.handleClick }" />
</aura:component>

<<<<<----Controller---->>>> 
({
    handleClick : function(c, e, h) {
        var namevalue = c.get("v.name");
        if(namevalue == undefined || namevalue.trim() == ""){
            c.set("v.isColor", false);
        }else{
            c.set("v.isColor", true);
        }
    }
})

<<<<----Style---->>>> 
.THIS {
}
.THIS .color .slds-input{
    border: 1px solid red;
}

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Ajay Dubedi
www.ajaydubedi.com
This was selected as the best answer
nbhradionbhradio
For this I think You should use Custom CSS file. Using custom css file or in case of Lightning custom THIS File will help you gain more control over each aspect of the page.

Thanks 
Siddhartha Sudhir Kulshrestha
ShanmukaShanmuka
Thank you Ajay Dubedi. It's working...
ShanmukaShanmuka
Hi Ajay Dubedi,
I am trying to apply same logic for picklist but it won't work, can u advise me
Thanks,
s.shanmuka