function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Sree SalesforceSree Salesforce 

Without giving inputvalue if we click on search Button . Inputtext field moving UP. when showing the alert. How can i adjsust, Please see screen shot.

User-added image
<aura:component controller="searchAccountController">
   <ltng:require styles="{! $Resource.SLDS24+ '/assets/styles/salesforce-lightning-design-system.css'}"/>
    <aura:attribute name="searchResult" type="List" description="use for store and display account list return from server"/>
   <aura:attribute name="searchKeyword" description="use for input" type="string" ></aura:attribute>
    <aura:attribute name="Message" type="boolean" default="false" description="use for display no record found message"/>
    <div class="slds-m-around--large">
       <form class="slds-form--inline"> 
         <div class="slds-form-element"> 
            <label class="slds-form-element__label" for="Search">Account Search</label>  
              <div class="slds-form-element__control" >
                <ui:inputtext aura:id="searchId" value="{!v.searchKeyword}" placeholder="Type Account Name" required="true" class="slds-input"></ui:inputtext>
              </div>
            </div> 
             <div class="slds-form-element">
                 <button type="Button" onclick="{!c.Search}" class="slds-button slds-button--brand">Search</button>
                 </div>
        </form>   
        <table class="slds-table slds-table--bordered slds-table--cell-buffer">
            <thead>
                <tr class="slds-text-title--caps">
                    <th scope="col">
                         <div class="slds-truncate" title=" Name"> ID</div>
                    </th>
                    <th scope="col">
                         <div class="slds-truncate" title=" Name"> Name</div>
                    </th>   
                     <th scope="col">
                          <div class="slds-truncate" title="Type">Type</div>
                       </th>
                       <th scope="col">
                          <div class="slds-truncate" title="Industry">Industry</div>
                       </th>
                       <th scope="col">
                          <div class="slds-truncate" title="Phone">Phone</div>
                       </th>
                       <th scope="col">
                          <div class="slds-truncate" title="Fax">Fax</div>
                       </th>
                </tr>
            </thead>
            <tbody>
            <aura:if isTrue="{!v.Message}">
               <div class="slds-text-color--error"> No Result Found...</div>
            </aura:if>
                <aura:iteration items="{!v.searchResult}" var="acc"> 
              <tr>
                  <td>
                     <div class="slds-truncate">{!acc.Id}</div>
                  </td>
                   <td>
                     <div class="slds-truncate">{!acc.name}</div>
                  </td>
                  <td>
                     <div class="slds-truncate">{!acc.Type}</div>
                  </td>
                  <td>
                     <div class="slds-truncate">{!acc.industry}</div>
                  </td>
                    <td>
                     <div class="slds-truncate">{!acc.Phone}</div>
                  </td>
                    <td>
                     <div class="slds-truncate">{!acc.fax}</div>
                  </td>
              </tr>
                </aura:iteration>    
            </tbody>
        </table>
      </div>     
     
</aura:component>
 
Best Answer chosen by Sree Salesforce
sfdcMonkey.comsfdcMonkey.com
hi manne
give space between style class name and .THIS keywork
try below code
.THIS .errorClassAdd {
    border:4px solid red;
    background-color:yellow;
}
.THIS .errorClassRemove {
    border:1px solid #d8dde6;;
}
then it's looks like
User-added image
also uncomment
// $A.util.removeClass(searchKeyId,'errorClassRemove');
in your js controller code
let me infrom if it helps you
thanks

http://sfdcmonkey.com

All Answers

sfdcMonkey.comsfdcMonkey.com
hi sri manne
this is the Default Error Handling so we can not controller this position 
but if you don't want to use this you can also make border red of the Search field when field is blank

in the style.css part use below css
.THIS .errorClassAdd {
    border:1px solid red;
}

.THIS .errorClassRemove {
    border:1px solid #d8dde6;;
}
and in your helper class

({
    Search : function(component, event, helper) {
        var searchKeyId=component.find("searchId");
        var searchKey=component.get('v.searchKeyword');
     // alert('==searchKeyword'+searchKey);
        if(searchKey == '' || searchKey == null){
           // alert('enter');
          //  searchKeyId.set("v.errors",[{message: "Enter search Keyword" }]);
         $A.util.addClass(searchKeyId, 'errorClassAdd');
         $A.util.removeClass(searchKeyId, 'errorClassRemove');

          
        }
        else{
           //  searchKeyId.set("v.errors",null);
             $A.util.addClass(searchKeyId, 'errorClassRemove');
             $A.util.removeClass(searchKeyId, 'errorClassAdd');

         helper.searchHelper(component,event);
        }
    },
})

output-:
User-added image
thanks
let me inform if it helps you and mark it best answer if my answer helps you so it make proper solution for others
http://sfdcmonkey.com


 
Sree SalesforceSree Salesforce
As You said , I have added like this ,Issue is not resolving. Could you please help me

LGT Component :-
<aura:component controller="searchAccountController">
   <ltng:require styles="{! $Resource.SLDS24+ '/assets/styles/salesforce-lightning-design-system.css'}"/>
    <aura:attribute name="searchResult" type="List" description="use for store and display account list return from server"/>
   <aura:attribute name="searchKeyword" description="use for input" type="string" ></aura:attribute>
    <aura:attribute name="Message" type="boolean" default="false" description="use for display no record found message"/>
    <div class="slds-m-around--large">
       <form class="slds-form--inline"> 
         <div class="slds-form-element"> 
            <label class="slds-form-element__label" for="Search">Account Search</label>  
              <div class="slds-form-element__control" >
                <ui:inputtext aura:id="searchId" value="{!v.searchKeyword}" placeholder="Type Account Name"  class="slds-input"></ui:inputtext>
              </div>
            </div> 
             <div class="slds-form-element">
                 <button type="Button" onclick="{!c.SearchJS}" class="slds-button slds-button--brand">Search</button>
                 </div>
        </form>   
        <table class="slds-table slds-table--bordered slds-table--cell-buffer">
            <thead>
                <tr class="slds-text-title--caps">
                    <th scope="col">
                         <div class="slds-truncate" title=" Name"> ID</div>
                    </th>
                    <th scope="col">
                         <div class="slds-truncate" title=" Name"> Name</div>
                    </th>   
                     <th scope="col">
                          <div class="slds-truncate" title="Type">Type</div>
                       </th>
                       <th scope="col">
                          <div class="slds-truncate" title="Industry">Industry</div>
                       </th>
                       <th scope="col">
                          <div class="slds-truncate" title="Phone">Phone</div>
                       </th>
                       <th scope="col">
                          <div class="slds-truncate" title="Fax">Fax</div>
                       </th>
                </tr>
            </thead>
            <tbody>
                 <aura:if isTrue="{!v.Message}">
               <div class="slds-text-color--error"> No Result Found...</div>
            </aura:if>
                <aura:iteration items="{!v.searchResult}" var="acc"> 
              <tr>
                  <td>
                     <div class="slds-truncate">{!acc.Id}</div>
                  </td>
                   <td>
                     <div class="slds-truncate">{!acc.name}</div>
                  </td>
                  <td>
                     <div class="slds-truncate">{!acc.Type}</div>
                  </td>
                  <td>
                     <div class="slds-truncate">{!acc.industry}</div>
                  </td>
                    <td>
                     <div class="slds-truncate">{!acc.Phone}</div>
                  </td>
                    <td>
                     <div class="slds-truncate">{!acc.fax}</div>
                  </td>
              </tr>
                </aura:iteration>    
            </tbody>
        </table>
      </div>     
     
</aura:component>

JS:-

({
    SearchJS : function(component, event, helper) {
        var searchKeyId=component.find("searchId"); 
        var searchKey=component.get('v.searchKeyword');
        alert('==searchKeyword'+searchKey);
        if(searchKey == '' || searchKey == null)
        {
            alert('--enter');
          //  searchKeyId.set("v.errors",[{message: "Enter search Keyword" }]);
             $A.util.addClass(searchKeyId,'errorClassAdd');
            //$A.util.removeClass(searchKeyId,'errorClassRemove');
        }
        else{
             $A.util.addClass(searchKeyId, 'errorClassRemove');
             $A.util.removeClass(searchKeyId, 'errorClassAdd');
            helper.searchHelper(component,event);
        } 
    },
})

Css :-
.THIS.errorClassAdd {
    border:4px solid red;
    background-color:yellow;
}
.THIS.errorClassRemove {
    border:1px solid #d8dde6;;
}

Helper :- 

({
    searchHelper: function(component, event) {
        var action = component.get("c.searchmethod");
        alert('====key'+component.get("v.searchKeyword"));
        action.setParams({
            'searchKeyword': component.get("v.searchKeyword")         
        });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var storeResponse = response.getReturnValue();
                // if storeResponse size is 0 ,display no record found message on screen.
                if (storeResponse.length == 0) {
                    component.set("v.Message", true);
                } else {
                    component.set("v.Message", false);
                
                }
                // set numberOfRecord attribute value with length of return value from server
                //component.set("v.numberOfRecord", storeResponse.length);
                // set searchResult list with return value from server.
                  component.set("v.searchResult", storeResponse);
                    alert('==='+component.set("v.searchResult", storeResponse));
            } 
 
        });
        $A.enqueueAction(action);
 
    },
})

Apex:- 


public class searchAccountController {

 @AuraEnabled
  public static list<account> searchmethod(string searchKeyword)
  {
    system.debug('--enter --'+searchKeyword);
    String searchKey=searchKeyword + '%';
    system.debug('--enter =--'+searchKey);
    list<account> returnList =new list<account>();
    list<account> AccList=[select id,name,type,industry,phone,fax from account where name like: searchKey];
    for(account acc:AccList)
    {
    returnList.add(acc);
       }
    return returnList;
    
  }
  
    public class wrapperaccount {
         @AuraEnabled
        public account acc{get;set;}
         @AuraEnabled
        public boolean isselected{get;set;}
       
    }

 
sfdcMonkey.comsfdcMonkey.com
hi manne
give space between style class name and .THIS keywork
try below code
.THIS .errorClassAdd {
    border:4px solid red;
    background-color:yellow;
}
.THIS .errorClassRemove {
    border:1px solid #d8dde6;;
}
then it's looks like
User-added image
also uncomment
// $A.util.removeClass(searchKeyId,'errorClassRemove');
in your js controller code
let me infrom if it helps you
thanks

http://sfdcmonkey.com
This was selected as the best answer