0

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);            
    },
0

To show an error message within the field of a lightning:input component, You can follow below steps:-

Define an aura id into your lightning:input

    <lightning:input aura:id="inputCmp" label="Email" 
          type="Email" name="email" required="true" .............../>

then you the aura id to throw error based on your condition in JS controller using setCustomValidity() and reportValidity():-

handleOnChangeEmail:function(component, event, helper) {
    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'){
            var inputCmp = cmp.find("inputCmp");
            if (response.getReturnValue() === "Email already exists") {
                inputCmp.setCustomValidity("Email already exists");
            } else {
                inputCmp.setCustomValidity(""); // if there was a custom error before, reset it
            }
            inputCmp.reportValidity(); // Tells lightning:input to show the error right away without needing interaction
        }});
    $A.enqueueAction(action);            
},
  • setCustomValidity - Sets a custom error message to be displayed when the input value is submitted.
  • reportValidity - Tells lightning:input to show the error right away without needing interaction
3
  • Hi Sanket, Thank you so much. I really appreciate it. It worked.
    – Amy
    Oct 9 '20 at 14:25
  • @amy I think you should create a seperate question for it Oct 9 '20 at 15:33
  • i have posted a new question. If you have any solution, please help me out. Thank you.
    – Amy
    Oct 12 '20 at 20:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.