-1

I have used Lightning data service for below code

  <aura:attribute name="Account" type="Account"/>
    <aura:attribute name="AccountFields" type="Account"/>
    <lightning:input aura:id="AccountFields" label="Customer Email Address" value="{!v.Account.Customer_Email_Address__c}" required="true" type="email"/>
    <lightning:input aura:id="AccountFields" label="Partner Email Address" value= "{!v.Account.partner_Email_Address__c}" required="true" type="email"/>
    <lightning:input aura:id="AccountFields" label="phone" value="{!v.Account.phone}" required="true" type="phone"/>

But Customer Email Address accepts below email format:

test@a - > its wrong


Iam trying to add few more logic to email validation.For that I have changed aura:id to customerEmail in Email Field (Because we used same aura:id for all the fields.My In tension is display error message on particular input field)

 <aura:handler name="change" value="{!v.value}" action="{!c.valueChangeValidation}"/>
   <aura:attribute name="Account" type="Account"/>
   <aura:attribute name="AccountFields" type="Account"/>
   <lightning:input aura:id="customerEmail" label="Customer Email Address" value="{!v.Account.Customer_Email_Address__c}" required="true" type="email"/>
   <lightning:input aura:id="AccountFields" label="Partner Email Address" value= "{!v.Account.partner_Email_Address__c}" required="true" type="email"/>
   <lightning:input aura:id="AccountFields" label="phone" value="{!v.Account.phone}" required="true" type="phone"/>

Javscript code:

validateEmail : function(component, event, helper) {
    var isValidEmail = true; 
    var emailField = component.find("customerEmail");
    var emailFieldValue = emailField.get("v.value");
    // Store Regular Expression That 99.99% Works. [ http://emailregex.com/] 
    var regExpEmailformat = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;  

    if(!$A.util.isEmpty(emailFieldValue)){   
        if(emailFieldValue.match(regExpEmailformat)){
          emailField.set("v.errors", [{message: null}]);
          $A.util.removeClass(emailField, 'slds-has-error');
          isValidEmail = true;
    }else{
         $A.util.addClass(emailField, 'slds-has-error');
         emailField.set("v.errors", [{message: "Please Enter a Valid Email Address"}]);
         isValidEmail = false;
    }
   }

But above code isnt showing error message below the input field "customer email".


is it possible to implement above custom email logioc here means how can do that

validateForm: function(component) {
    var allValid = component.find('AccountFields').reduce(function (validFields, inputCmp) {
        inputCmp.showHelpMessageIfInvalid();
        return validFields && inputCmp.get('v.validity').valid;
    }, true);

    return(allValid);

}

and also i have tried to add below pattern in email field.But itsnot taking it

<lightning:input aura:id="ccrFields" label="Partner Rep Email" value=" 
{!v.ccrFields.Partner_Rep_Email__c}" required="true" type="email"
 pattern="/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\ [[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/">

I have added this code:

validateForm: function(component) {
    var allValid = component.find('AccountFields').reduce(function (validFields, inputCmp) {
        inputCmp.showHelpMessageIfInvalid();
        return validFields && inputCmp.get('v.validity').valid;
    }, true);

    return allValid && helper.validateEmail(component, event, helper);

}


 validateEmail : function(component, event, helper) {

    var emailValid = component.find('AccountFields').reduce(function 
 (validFields, inputCmp) {
        var regExpEmailformat = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\ 
    [\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9] 
{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;  
          if(!$A.util.isEmpty(inputCmp.get('v.value'))){   
            if(inputCmp.get('v.value').match(regExpEmailformat)){
                inputCmp.set("v.errors", [{message: null}]);
                $A.util.removeClass(inputCmp, 'slds-has-error');
                return true;
            } else {
                $A.util.addClass(inputCmp, 'slds-has-error');
                inputCmp.set("v.errors", [{message: "Please Enter a Valid Email Address"}]);
                return false;
            }
        }
    }, true);
}
10
  • Can you add the component part that deals with the Lightning Data Service? If you take a look to the Trailhead regarding force:recordData you can see how to use it. Please, show us the force:recordData to figure this out. Nov 23 '18 at 10:55
  • Added the force:recorddata code Nov 23 '18 at 11:34
  • The targetFields="{!v.AccountFields}" should be connected to an <aura:atributte name="AccountFields" type="Object" /> and to access the Email field you need to do something like: <lightning:input label="Customer Email Address" value="{!v.sAccountFields.Customer_Email_Address__c}"/>. That should give you access to the custom email field. Also make sure that this custom email field is of type email. Nov 23 '18 at 12:18
  • its already type email only problem is it will accept this format: test@a...So Iam going for custom email validation Nov 23 '18 at 12:22
  • 1
    When are you trying to fire this validation? I assume that you are building some kind of New Record Entry form? or and Update Record Form? I can see that you are firing the handler named "change". To really understand your code I think you should paste the full parts of your component here. Full component, controller, and helpers. I can't see where you are firing the validateEmail script. I understand that you want to set some validation on the Email field, but with pieces of code here and there makes very hard to see the all picture. Please, add all the code parts. Nov 23 '18 at 12:33
0

I don't think the use of <force:recordData> or the duplicated aura:id actually matter here. You just need to either call your validateEmail() method from validateForm(), or incorporate its logic directly into that method.

An easy way to do this would be - assuming that both methods are in your helper - change the signature of validateForm() to

validateForm: function(component, event, helper) {

and change its final line to

return allValid && helper.validateEmail(component, event, helper);

If you have multiple email fields, you can handle them in pretty much the same way as you validate multiple non-email fields. Something roughly like this:

var emailValid = component.find('customerEmail').reduce(function (validFields, inputCmp) {
    var regExpEmailformat = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;  

    if(!$A.util.isEmpty(inputCmp.get('v.value'))){   
        if(inputCmp.get('v.value').match(regExpEmailformat)){
            inputCmp.set("v.errors", [{message: null}]);
            $A.util.removeClass(inputCmp, 'slds-has-error');
            return true;
        } else {
           $A.util.addClass(inputCmp, 'slds-has-error');
           inputCmp.set("v.errors", [{message: "Please Enter a Valid Email Address"}]);
           return false;
        }
    }
}, true);

return allValid && emailValid;

n.b this is not compiled/tested code; just a sketch based on what you already have.

I'm not sure how to help beyond that because you've omitted significant portions of your validation code.

9
  • Okay.Thanks ... I Will do that but problem is if you have so email fields in form .How do I Identify it.and how can I display error below that email field Nov 24 '18 at 13:35
  • Give them all an aura:id just like you do the other fields and do the validation in a loop over them.
    – David Reed
    Nov 24 '18 at 13:39
  • Can you please help me on that logic Nov 25 '18 at 6:35
  • @AnnappaPH I updated the answer the previous time you made that comment.
    – David Reed
    Nov 25 '18 at 14:00
  • Thanks david.i have one query for you used aura I as customer email..suppose if I have 4 email fields ...then I need to change the aura:id for all the email fields.???? Nov 26 '18 at 1:42

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.