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
Lauren BLauren B 

Error message below the field.


In the below code i have put alert message to show duplicate emails. But my requirement is to put error message below the field instead of alert message.I have used lightning aura component. 
Apex-
@AuraEnabled
   global static String getEmails(String emailstring){
        Integer len=emailstring.length();
        List<contact> con;
        if(len>0 && emailstring!=''){
            con=[select id,Email from contact where email=:emailstring]; 
        }
        system.debug('Emails checll-------'+con);
        String msg='Email already exists';
        string msg1='';
        if (con.size()>0){
            return msg;
        }  
        else return msg1;
       
    }

HTML-

<lightning:input  class="inputfields"    aura:id="email" label="Email" type="Email" name="email" value="{!v.newContact.Email}" required="true" messageWhenValueMissing="Please enter your Email"  pattern="^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$"  messageWhenPatternMismatch="Please Enter a valid Email Address" onchange="{!c.handleOnChangeEmail}"/>


JS-

handleOnChangeEmail:function(component, event, helper) {
        console.log('Email---');
        var action=component.get("c.getEmails");
        action.setParams({
            "emailstring":component.get("v.newContact.Email")
        });     
        action.setCallback(this, function(response) {
            var state= response.getState();
            if(state==='SUCCESS'&& response.getReturnValue()!=''){
                console.log('responseEmail---');
                alert(response.getReturnValue());
               
                component.set("v.newContact.Email",'');
            }});
        $A.enqueueAction(action);            
    },

 
AnudeepAnudeep (Salesforce Developers) 
Hi Amrita - I found this code on the forums that will display the error message under the specific field. I recommend giving a try
  
Note : - contactFirstName is aura id of the component and in your case is tc.
Using this you can set validation for all the components

var validContact = true;
var firstNameField = component.find("contactFirstName");
        if($A.util.isEmpty(firstNameField.get("v.value"))) {
            validContact = false;
            firstNameField.set("v.errors", [{message:"First name can't be blank"}]);
        }
        else {
            firstNameField.set("v.errors", null);
        }

// in last check if the flag is true
if(validContact){
  // put your stuff here..
}

Also, I am unsure if it it work but you can try leveraging <lightning:notificationsLibrary aura:id="notifLib"/> as well
  
<aura:component>
    <lightning:notificationsLibrary aura:id="notifLib"/>
    <lightning:button name="notice" label="Show Notice" onclick="{!c.handleShowNotice}"/>
</aura:component>
  
({
    handleShowNotice : function(component, event, helper) {
        component.find('notifLib').showNotice({
            "variant": "error",
            "header": "Something has gone wrong!",
            "message": "Unfortunately, there was a problem updating the record.",
            closeCallback: function() {
                alert('You closed the alert!');
            }
        });
    }
})

Let me know if this helps
ANUTEJANUTEJ (Salesforce Developers) 
Hi Amrita,

I have below link for documentation that has an implementation to show error under a field:

Link: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_validate_fields.htm

I hope this helps and in case if this comes in handy can you please choose this as the best answer so that it can be useful for others in the future.

Regards,
Anutej