0

I am trying to validate all fields when the user click's on the submit button.

Issue: I had to maintain different aura: id's for the lightning input elements, due to some other logic needs to be done on every input.

I would like to know how can I validate all elements on click?

Can someone please advise?

Component:

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" >
    <lightning:input aura:id="fieldId" label="First name" placeholder="First name" required="true" messageWhenValueMissing="Enter FirstName"/>
        <lightning:input aura:id="fieldId" label="Last name" placeholder="Last name" required="true" messageWhenValueMissing="Enter LastName" />
        <lightning:input aura:id="MiddleName" label="Middle name" placeholder="Middle name" required="true" messageWhenValueMissing="Enter Middle" />
        <lightning:button aura:id="submit" type="submit" label="Submit" onclick="{!c.onClick}" />
</aura:component>

Controller :

({ 
    onClick: function(component, event, helper) {
         console.log("On Click");
       helper.ValidateFirstName(component, event, helper);
       helper.ValidateMiddleName(component, event, helper);
    }
})

Helper :

({
    ValidateFirstName: function(component, event, helper) {
       console.log("On Click helper");
        var allValid = component.find('fieldId').reduce(function (validSoFar, inputCmp) {
            inputCmp.showHelpMessageIfInvalid();
            return validSoFar && !inputCmp.get('v.validity').valueMissing;
        }, true);
   },
    ValidateMiddleName: function(component, event, helper) {
       console.log("On Click Middle Name helper");
        var allValid = component.find('MiddleName').reduce(function (validSoFar, inputCmp) {
            inputCmp.showHelpMessageIfInvalid();
            return validSoFar && !inputCmp.get('v.validity').valueMissing;
        }, true);
   },

})

Thanks in Advance !!!!

  • instead of having different aura:id's per field name, instead use an aura:id for all fields that need validating and use a name attribute to distinguish the field type or name. – glls Mar 17 at 0:20
1

Instad of using the aura:id to perform validations per field type, use a genric aura:id for all your required fields, such as aura:id='req-fields' and assigning a representative name attribute for your field types, ex. name='MiddleName' this way, you can run your validate method regardless, and instead, check the field name while doing so:

Validate: function(component, event, helper) { 
    const fieldName = event.getSource().get("v.name");
    //do your validations based on field name
    ...},

ValidateSubmit: function(component, event, helper) { 
    const allReqFields= component.find('req-fields');
    // do your validations for allReqFields which is an array of all 
    // components with the specified aura:id
    ...},

you can invoke your validate method with onchange for lightning:input

  • Hi glls, thanks for the reply.i cannot use the same aura:Ids for the elements as I have already mentioned in my post. Just trying to find as how can I do the validation on elements that uses different aura:Ids.I will try the above code snippet and check weather it would work for. Thanks – Donald Mar 17 at 4:28
  • Glls, I would like all these validations to be happening on the click of the submit button. I didn't clearly understand why the above code snippet has two methods.apologizes if I got it wrong. – Donald Mar 17 at 4:40
  • My only intention, I want this validation is that when the user clicks on the submit button without filling up any field, the fields should have highlighted in red and shows the error. – Donald Mar 17 at 4:46
  • it has two methds because in your post you mentioned Issue: I had to maintain different aura: id's for the lightning input elements, due to some other logic needs to be done on every input. however, you dont need the first method i posted, only the second one if you want to valdiate on submit – glls Mar 17 at 17:46
-1

Why would you go for checking all validations using this way. Instead, I would recommend going this way.

Connect Your Lightning input tag with value attribute:

Example :

 <aura:attribute name="firstName" type="String" default="" />

 <lightning:input aura:id="fieldId" label="First name" placeholder="First 
       name" required="true" messageWhenValueMissing="Enter FirstName" value = 
       "{!v.firstName}"/>

 <lightning:button aura:id="submit" type="submit" label="Submit" onclick="{!c.ValidateSubmit}" />


  ValidateSubmit :  function(component, event) {

     if(component.get('v.showErrorPrimary') || component.get('v.firstName') || component.get('v.LastNameName') || component.get('v.age'){
       // Your error string.
        return true;
    } else {
        return false;
    }
},

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.