You need to sign in to do that
Don't have an account?
![Raghu Natha 2 Raghu Natha 2](https://dfc-org-production.my.site.com/img/userprofile/default_profile_45_v2.png)
lightning:input validation
Hi,
Can some one tell me the difference between the below 2 validation scenarios
Scenario 1, has 2 lightning fields to validate and the validation in JS works as expected
Scenario 2, has just one lightning input field to validate and the same JS validation fails (WHY ?) (What is the solution for this scenario for validation)
SCENARIO1:
<aura:component>
<aura:attribute name = "documentType" type="String"/>
<aura:attribute name = "attachmentNameValue" type="String"/>
<lightning:layoutItem class="slds-p-around--medium" size="6">
<lightning:select aura:id="fieldId"
required="true"
name="attachmentType"
label="Attachment Type"
value="{!v.documentType}" >
<option value = "">select</option>
</lightning:select>
</lightning:layoutItem>
<lightning:layoutItem class="slds-p-around--medium" size="6">
<lightning:input aura:id="fieldId"
required="true"
label="File Name"
name="filename"
value="{!v.attachmentNameValue}"/>
</lightning:layoutItem>
<lightning:button variant="brand" label="Upload" value="uploadSearch" onclick="{!c.handleUploadAction}"/>
</aura:component>
JS:
({
handleUploadAction : function(component, event, helper) {
//helper.onSelectChange(component, event);
var allValid = component.find('fieldId').reduce(function (validSoFar, inputCmp) {
inputCmp.showHelpMessageIfInvalid();
return validSoFar && !inputCmp.get('v.validity').valueMissing;
}, true);
if (allValid) {
alert('All form entries look valid. Ready to submit!');
} else {
alert('Please update the invalid form entries and try again.');
}
}
})
SCENARIO 2:
<aura:component>
<aura:attribute name = "documentType" type="String"/>
<aura:attribute name = "attachmentNameValue" type="String"/>
<lightning:layoutItem class="slds-p-around--medium" size="6">
<lightning:input aura:id="fieldId"
required="true"
label="File Name"
name="filename"
value="{!v.attachmentNameValue}"/>
</lightning:layoutItem>
<lightning:button variant="brand" label="Upload" value="uploadSearch" onclick="{!c.handleUploadAction}"/>
</aura:component>
JS:
({
handleUploadAction : function(component, event, helper) {
//helper.onSelectChange(component, event);
var allValid = component.find('fieldId').reduce(function (validSoFar, inputCmp) {
inputCmp.showHelpMessageIfInvalid();
return validSoFar && !inputCmp.get('v.validity').valueMissing;
}, true);
if (allValid) {
alert('All form entries look valid. Ready to submit!');
} else {
alert('Please update the invalid form entries and try again.');
}
}
})
Can some one tell me the difference between the below 2 validation scenarios
Scenario 1, has 2 lightning fields to validate and the validation in JS works as expected
Scenario 2, has just one lightning input field to validate and the same JS validation fails (WHY ?) (What is the solution for this scenario for validation)
SCENARIO1:
<aura:component>
<aura:attribute name = "documentType" type="String"/>
<aura:attribute name = "attachmentNameValue" type="String"/>
<lightning:layoutItem class="slds-p-around--medium" size="6">
<lightning:select aura:id="fieldId"
required="true"
name="attachmentType"
label="Attachment Type"
value="{!v.documentType}" >
<option value = "">select</option>
</lightning:select>
</lightning:layoutItem>
<lightning:layoutItem class="slds-p-around--medium" size="6">
<lightning:input aura:id="fieldId"
required="true"
label="File Name"
name="filename"
value="{!v.attachmentNameValue}"/>
</lightning:layoutItem>
<lightning:button variant="brand" label="Upload" value="uploadSearch" onclick="{!c.handleUploadAction}"/>
</aura:component>
JS:
({
handleUploadAction : function(component, event, helper) {
//helper.onSelectChange(component, event);
var allValid = component.find('fieldId').reduce(function (validSoFar, inputCmp) {
inputCmp.showHelpMessageIfInvalid();
return validSoFar && !inputCmp.get('v.validity').valueMissing;
}, true);
if (allValid) {
alert('All form entries look valid. Ready to submit!');
} else {
alert('Please update the invalid form entries and try again.');
}
}
})
SCENARIO 2:
<aura:component>
<aura:attribute name = "documentType" type="String"/>
<aura:attribute name = "attachmentNameValue" type="String"/>
<lightning:layoutItem class="slds-p-around--medium" size="6">
<lightning:input aura:id="fieldId"
required="true"
label="File Name"
name="filename"
value="{!v.attachmentNameValue}"/>
</lightning:layoutItem>
<lightning:button variant="brand" label="Upload" value="uploadSearch" onclick="{!c.handleUploadAction}"/>
</aura:component>
JS:
({
handleUploadAction : function(component, event, helper) {
//helper.onSelectChange(component, event);
var allValid = component.find('fieldId').reduce(function (validSoFar, inputCmp) {
inputCmp.showHelpMessageIfInvalid();
return validSoFar && !inputCmp.get('v.validity').valueMissing;
}, true);
if (allValid) {
alert('All form entries look valid. Ready to submit!');
} else {
alert('Please update the invalid form entries and try again.');
}
}
})