0

I have build a form in lightning aura component. My requirement is how to validate onclick custom message to check email duplicacy on the submit button. In my code message for email duplicacy is showing but upon clicking the submit button it is getting submitted without changing the email.

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) {
    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 email = component.find("email");
            if (response.getReturnValue() === "Email already exists") {
                email.setCustomValidity("Email already exists");
            } else {
                email.setCustomValidity(""); // if there was a custom error before, reset it
                 
            }
            email.reportValidity(); // Tells lightning:input to show the error right away without needing interaction
        }});
    $A.enqueueAction(action);            
},

Submit Button-

navigateToNextPage:function(component, event, helper) { 
    
    event.preventDefault()
     if(('v.newContact.Email')>0 && emailstring!='')){
    component.find("email"). enablenextpage();
}

    
      
    var firstname = component.get('v.newContact.FirstName');
    var regex=/^[a-zA-Z ]+$/;
    var validFirstName = regex.test(firstname);
    
    var lastname = component.get('v.newContact.LastName');
    var regex=/^[a-zA-Z -]+$/;
    var validLastName = regex.test(lastname);
    
    var phones = component.get('v.newContact.Phone');
    var regex=/^[-0-9() ]+$/;
    var validPhone = regex.test(phones);
    
    var email = component.get('v.newContact.Email');
    var regex=/^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/;
    var validEmail = regex.test(email);
    
    var zipcode = component.get('v.newContact.Zip_Postal_Code__c');
    var regex=/^[a-zA-Z0-9]+$/;
    var validZip_Postal_Code__c = regex.test(zipcode);
    
   
    
    
    if($A.util.isEmpty(component.get('v.newContact.Country__c'))){
        component.find('country').showHelpMessageIfInvalid();
        //alert('please provide the required fields');
    }
    
    if((component.get('v.newContact.FirstName')==null
        || component.get('v.newContact.Organization_Agency_Name__c')==null
        || component.get('v.newContact.Email')==null
        || component.get('v.newContact.Address__c')==null
        //|| $A.util.isEmpty(component.get('v.newContact.Country__c'))                  
        || component.get('v.newContact.Zip_Postal_Code__c')==null
        || component.get('v.newContact.LastName')==null
        || component.get('v.newContact.Title')==null
        || component.get('v.newContact.Phone')==null
        || component.get('v.newContact.City__c')==null))
    
                    
    {
        
        console.log('empty value--1--');
        component.find('firstName').showHelpMessageIfInvalid();
        component.find('organization_agencyName').showHelpMessageIfInvalid(); 
        component.find('email').showHelpMessageIfInvalid();
        component.find('address').showHelpMessageIfInvalid();
        console.log('empty value-2---');
        //component.find('country').showHelpMessageIfInvalid();
        component.find('zipcode').showHelpMessageIfInvalid();
        component.find('lastname').showHelpMessageIfInvalid();
        component.find('title').showHelpMessageIfInvalid();
        component.find('phones').showHelpMessageIfInvalid();
        component.find('city').showHelpMessageIfInvalid();
        console.log('empty value-4---');
        window.scroll(0,0);
            //return;
    }
    
    
    
    //if( $A.util.isEmpty(component.get('v.newContact.Country__c')))
    //{
     //component.find('country').showHelpMessageIfInvalid();  
   // console.log('test---'+component.get('v.errorboolean'));
     //   return;
     //}
    
    else if(( component.get('v.newContact.Phone')==null
             || $A.util.isEmpty(component.get('v.newContact.Country__c'))
             ||component.get('v.newContact.FirstName')==''
             || component.get('v.newContact.Organization_Agency_Name__c')==''
             || component.get('v.newContact.Email')==''
             || component.get('v.newContact.Address__c')==''
             || component.get('v.newContact.Zip_Postal_Code__c')==''
             || component.get('v.newContact.LastName')==''
             || component.get('v.newContact.Title')==''
             || component.get('v.newContact.Phone')==''
             || component.get('v.newContact.City__c')==''
             || !validLastName
             || !validFirstName
             || !validPhone
             || !validEmail
             || !validZip_Postal_Code__c  ))
           
            
            {   
        
         window.scroll(0,0);
        
        component.set('v.enablenextpage',true);
    }
         
    
    
    
    
              else if (component.get('v.newContact.Country__c')=='United States of America' && 
                 (component.get('v.newContact.State__c')==null||component.get('v.newContact.State__c')==''))
        {
            component.set('v.stateboo',true);
       }                 
5
  • Are you using recordEditForm here? Oct 14, 2020 at 15:39
  • so are you using html form here? Oct 14, 2020 at 15:43
  • Yes. I have written some validation for other fields like country, state on submit button but don't know how to achieve this custom message validation on the button.
    – Amy
    Oct 14, 2020 at 15:47
  • I have used lightning aura component.
    – Amy
    Oct 14, 2020 at 15:47
  • Just wanted to know how to call this onclick custom message on the button. If user changes his email then only he should be able to submit.
    – Amy
    Oct 14, 2020 at 15:53

1 Answer 1

0

You don't need to do a lot of custom coding here. Just use the lightning:recordEdit form. All the validations like invalid email, invalid phone are handled by the record form itself.

<aura:component>
    <lightning:recordEditForm recordId="003XXXXXXXXXXXXXXX" objectApiName="Contact">
        <lightning:messages />
        <lightning:inputField fieldName="Organization_Agency_Name__c" />
        <lightning:inputField fieldName="FirstName" />
        <lightning:inputField fieldName="LastName" />
        <lightning:inputField fieldName="Email" />
        ...
        ...
        <lightning:button class="slds-m-top_small" variant="brand" type="submit" name="save" label="Save" onsubmit="{!c.handleSubmit}"/>
    </lightning:recordEditForm>
</aura:component>

lightning:recordEditForm Documents.

You can also set the field as required like below.

<lightning:inputField fieldName="LastName" required/>
3
  • No luck. This code is not working.
    – Amy
    Oct 14, 2020 at 16:07
  • I have added the complete code for validation on button. I am new to the lightning so i am not sure i have added the email code correctly. If you can help me with the code that would be very helpful. Thank you so much.
    – Amy
    Oct 14, 2020 at 17:16
  • please check the answer now, actually you don't need to do a lot of code here. Just use the lightning record edit form. Oct 14, 2020 at 17:34

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .