You need to sign in to do that
Don't have an account?
Bob 11
Salesforce lightning component required field message on every field
I have a lightning component that has required fields. my issue is i want the require field message to be displayed on every field if it is missing that information and not at the top of the page. I was wondering if anyone could help me with updating the code below to accomplish this update.
Lightning Component
Lightning Component
<aura:component description="ContactQuestions" controller="ContactQuestionsController" implements="forceCommunity:availableForAllPageTypes,lightning:isUrlAddressable" access="global"> <aura:attribute name="toScheduling" type="Boolean" default="false"/> <aura:attribute name="displayFlowModal" type="Boolean" default="false"/> <aura:attribute name="showAssist" type="Boolean" default="false"/> <aura:attribute name="showError" type="Boolean" default="false"/> <aura:attribute name="errorMessage" type="String"/> <aura:attribute name="firstname" type="string"/> <aura:attribute name="lastname" type="string"/> <aura:attribute name="email" type="string"/> <aura:attribute name="gasUtilityNumber" type="string"/> <aura:attribute name="electricUtilityNumber" type="string"/> <aura:attribute name="phoneNum" type="string"/> <aura:attribute name="serviceZip" type="string"/> <aura:attribute name="opLang" type="List"/> <aura:attribute name="opHeatFuel" type="List"/> <aura:attribute name="opCondo" type="List"/> <aura:attribute name="opOwnRent" type="List"/> <aura:attribute name="opHear" type="List"/> <aura:attribute name="opBuildingType" type="List"/> <aura:attribute name="opGasUtilHolder" type="List"/> <aura:attribute name="opElectricUtilHolder" type="List"/> <aura:attribute name="opHeatWith" type="List"/> <aura:attribute name="opSquareFeet" type="List"/> <aura:attribute name="opHowMany" type="List"/> <aura:attribute name="opWhyContactUs" type="List"/> <aura:attribute name="opMakeImprove" type="List"/> <aura:attribute name="opHowManyUnits" type="List"/> <aura:attribute name="opHomeStyle" type="List"/> <aura:attribute name="opPrimaryFuel" type="List"/> <aura:attribute name="opSecondaryFuel" type="List"/> <aura:attribute name="opLive" type="List" default="[ {'label': 'Yes', 'value': 'yes'}, {'label': 'No', 'value': 'no'}]"/> <aura:attribute name="recordId" type="String"/> <!-- Contact Attributes --> <aura:attribute name="ContactInformation" type="Object"/> <aura:attribute name="preferredLanguage" type="String"/> <aura:attribute name="streetAddress" type="String"/> <aura:attribute name="zip" type="String"/> <aura:attribute name="city" type="String"/> <aura:attribute name="state" type="String"/> <aura:attribute name="mobile" type="String"/> <aura:attribute name="alternatePhone" type="String"/> <!-- <aura:attribute name="heatFuel" type="String"/>--> <aura:attribute name="condoAssoc" type="String"/> <aura:attribute name="makeImprovements" type="String"/> <aura:attribute name="ownOrRent" type="String"/> <aura:attribute name="liveThere" type="String"/> <aura:attribute name="howHear" type="String"/> <!-- <aura:attribute name="promoCode" type="String"/>--> <aura:attribute name="whyContactUs" type="String"/> <aura:attribute name="gasUtilHolder" type="String"/> <aura:attribute name="electricUtilHolder" type="String"/> <aura:attribute name="abandonedForm" type="Boolean"/> <aura:attribute name="externalLead" type="Boolean"/> <!-- Account Attributes --> <aura:attribute name="howManyUnits" type="Integer"/> <aura:attribute name="yearBuilt" type="String"/> <aura:attribute name="sqFeet" type="Integer"/> <aura:attribute name="primaryFuel" type="String"/> <aura:attribute name="secondaryFuel" type="String"/> <aura:attribute name="buildingType" type="String"/> <aura:attribute name="homeStyle" type="String"/> <aura:attribute name="primaryFuelPercent" type="Integer" default="50"/> <aura:attribute name="secondaryFuelPercent" type="Integer" default="50"/> <aura:attribute name="landlordName" type="String"/> <aura:attribute name="landlordEmail" type="String"/> <aura:attribute name="landlordPhone" type="String"/> <aura:attribute name="associationName" type="String"/> <aura:attribute name="associationEmail" type="String"/> <aura:attribute name="associationPhone" type="String"/> <aura:attribute name="optOut" type="Boolean" default="false"/> <aura:attribute name="gasHolderFirstName" type="String"/> <aura:attribute name="gasHolderLastName" type="String"/> <aura:attribute name="electricHolderFirstName" type="String"/> <aura:attribute name="electricHolderLastName" type="String"/> <!-- Accordion Attributes --> <aura:attribute name="section" type="String"/> <lightning:navigation aura:id="navService"/> <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <aura:if isTrue="{!!v.toScheduling}"> <lightning:layout horizontalAlign="spread"> <lightning:layoutItem size = "2"><lightning:input type="text" label="First Name" value="{!v.ContactInformation.FirstName}" disabled="true"/></lightning:layoutItem> <lightning:layoutItem size = "2"><lightning:input type="text" label ="Last Name" value="{!v.ContactInformation.LastName}" disabled="true"/></lightning:layoutItem> <lightning:layoutItem size = "2"><lightning:input type="text" label = "Email" value="{!v.ContactInformation.Email}" disabled="true"/></lightning:layoutItem> <lightning:layoutItem size = "2"><lightning:input type="text" label = "Phone" value="{!v.ContactInformation.Phone}" disabled="true"/></lightning:layoutItem> <lightning:layoutItem size = "2"><lightning:input type="text" label = "Zip Code" value="{!v.ContactInformation.MailingPostalCode}" disabled="true"/></lightning:layoutItem> </lightning:layout> <lightning:accordion aura:id="accordion" allowMultipleSectionsOpen="true" activeSectionName="{!v.section}" onsectiontoggle="{!c.handleSectionToggle}"> <lightning:layout class="slds-align_absolute-center"> <lightning:layoutItem size = "6" padding="around-small"> <aura:if isTrue="{!v.showError}"> <div id="error" class="errormessage"> <lightning:input value="{!v.errorMessage}" readonly="true"/> </div> </aura:if> <br/> <lightning:accordionSection name="reason" label="What brought you here today"> <lightning:combobox options="{!v.opHear}" value="{!v.howHear}" aura:id="howHear" class="widthFix" required="true" label="How did you hear about us?"/> <lightning:combobox options="{!v.opWhyContactUs}" value="{!v.whyContactUs}" aura:id="whyContactUs" class="widthFix" required="true" label="What is the primary reason you contacted us?"/> </lightning:accordionSection> <lightning:accordionSection name="home" label="Tell us a bit more about your home"> <lightning:combobox options="{!v.opPrimaryFuel}" value="{!v.primaryFuel}" aura:id="primFuel" class="widthFix" required="true" label="What is your primary heat fuel?"/> <lightning:input type="text" value="{!v.streetAddress}" maxlength="100" aura:id="streetAddress" class="input" required="true" label="Street Address"/> <lightning:input type="text" value="{!v.zip}" maxlength="10" aura:id="zip" class="input" required="true" label="Zip"/> <lightning:input type="text" value="{!v.city}" maxlength="25" aura:id="city" class="input" required="true" label="City"/> <lightning:input type="text" value="{!v.state}" maxlength="10" aura:id="state" class="input" required="true" label="State"/> <lightning:input type="text" value="{!v.mobile}" maxlength="12" aura:id="mobile" class="input" required="false" label="Mobile Phone"/> <lightning:input type="text" value="{!v.alternatePhone}" maxlength="12" aura:id="alternatePhone" class="input" label="Alternate Phone"/> <lightning:combobox options="{!v.opOwnRent}" value="{!v.ownOrRent}" aura:id="ownOrRent" class="widthFix" label="Are you the owner, tenant or landlord?"/> <aura:if isTrue="{!v.ownOrRent == 'Tenant'}"> <lightning:input type="text" value="{!v.landlordName}" maxlength="100" aura:id="landlordName" class="input" label="Landlord Name"/> <lightning:input type="email" value="{!v.landlordEmail}" maxlength="255" aura:id="landlordEmail" class="input" label="Landlord Email"/> <lightning:input type="tel" value="{!v.landlordPhone}" maxlength="40" aura:id="landlordPhone" class="input" label="Landlord Phone"/> </aura:if> <aura:if isTrue="{!or(v.ownOrRent == 'Owner', v.ownOrRent == 'Landlord')}"> <lightning:combobox options="{!v.opLive}" value="{!v.liveThere}" aura:id="liveThere" class="widthFix" label="Do you reside in this dwelling?"/> </aura:if> <!-- <aura:if isTrue="{!v.ownOrRent == 'Owner'}">--> <!-- <lightning:combobox options="{!v.opLive}" value="{!v.liveThere}" aura:id="liveThere" class="widthFix" label="Do you own or rent?"/>--> <!-- </aura:if>--> <lightning:combobox options="{!v.opBuildingType}" value="{!v.buildingType}" aura:id="homeStyle" class="widthFix" label="What is your building type?"/> <!-- <lightning:combobox options="{!v.opHowManyUnits}" value="{!v.howManyUnits}" aura:id="units" class="widthFix" label="How many units?"/> --> <lightning:combobox options="{!v.opHomeStyle}" value="{!v.homeStyle}" aura:id="homeStyle" class="widthFix" label="What is the home style?"/> <lightning:input aura:id="yearBuilt" class="input" value="{!v.yearBuilt}" minlength="4" maxlength="4" label="What year was your home built?"/> <lightning:combobox options="{!v.opSquareFeet}" value="{!v.sqFeet}" aura:id="squareFeet" class="widthFix" label="The approximate Square footage of living space, (not including garage, basements, attic)"/> <lightning:combobox options="{!v.opCondo}" value="{!v.condoAssoc}" aura:id="condoAss" class="widthFix" label="Do you have a Condo Association?"/> <lightning:input type="checkbox" value="{!v.optOut}" onchange="{!c.optOutOfEmails}" aura:id="optOut" class="input" label="Opt Out of Promotional Emails"/> <!-- <aura:if isTrue="{!v.condoAssoc == 'Yes'}"> <lightning:combobox options="{!v.opMakeImprove}" value="{!v.makeImprovements}" aura:id="makeImprovs" class="widthFix" label="Can you make improvements to your building without association approval?"/> <aura:if isTrue="{!v.makeImprovements == 'No'}"> <lightning:input type="text" value="{!v.associationName}" maxlength="100" aura:id="associationName" class="input" label="Association Name"/> <lightning:input type="email" value="{!v.associationEmail}" maxlength="255" aura:id="associationEmail" class="input" label="Association Email"/> <lightning:input type="tel" value="{!v.associationPhone}" maxlength="40" aura:id="associationPhone" class="input" label="Association Phone"/> </aura:if> </aura:if> --> </lightning:accordionSection> <lightning:accordionSection name="account" label="Account information"> <aura:if isTrue="{!v.primaryFuel == 'Natural Gas'}"> <lightning:input type="text" value="{!v.gasUtilityNumber}" maxlength="100" aura:id="gasUtilNumber" class="input" required="false" label="Gas Utility Number"/> <lightning:combobox options="{!v.opGasUtilHolder}" value="{!v.gasUtilHolder}" aura:id="gasUtilHolder" class="widthFix" label="Are you listed as the Gas Account holder?"/> <aura:if isTrue="{!v.gasUtilHolder == 'No'}"> <lightning:input type="text" value="{!v.gasHolderFirstName}" maxlength="100" aura:id="gasHolderFirstName" class="input" label="Gas Account Holder First Name"/> <lightning:input type="text" value="{!v.gasHolderLastName}" maxlength="100" aura:id="gasHolderLastName" class="input" label="Gas Account Holder Last Name"/> </aura:if> </aura:if> <lightning:input type="text" value="{!v.electricUtilityNumber}" maxlength="100" aura:id="electricUtilNumber" class="input" required="false" label="Electric Utility Number"/> <lightning:combobox options="{!v.opElectricUtilHolder}" value="{!v.electricUtilHolder}" aura:id="electricUtilHolder" class="widthFix" label="Are you listed as the Electric Account holder?"/> <aura:if isTrue="{!v.electricUtilHolder == 'No'}"> <lightning:input type="text" value="{!v.electricHolderFirstName}" maxlength="100" aura:id="electricHolderFirstName" class="input" label="Electric Account Holder First Name"/> <lightning:input type="text" value="{!v.electricHolderLastName}" maxlength="100" aura:id="electricHolderLastName" class="input" label="Electric Account Holder Last Name"/> </aura:if> </lightning:accordionSection> </lightning:layoutItem> </lightning:layout> </lightning:accordion> <div class="slds-text-align--right"> <lightning:button variant="brand-outline" class="slds-m-right_medium" label="Exit" name="cancel" onclick="{!c.navigateToHomePage}" aura:id="exitToHome"/> <lightning:button variant="brand-outline" class="slds-m-right_medium" label="Don’t Have Account Information" name="cancel" onclick="{!c.navigateToSchedulingSupport}" aura:id="schedulingSupport"/> <lightning:buttonGroup> <lightning:button variant="brand" label="Book Appointment" name="schedule" onclick="{!c.completeRegistration}" aura:id="submitreg"/> </lightning:buttonGroup> </div> </aura:if> <aura:if isTrue="{!v.toScheduling}"> <c:FSL_AppointmentBooking></c:FSL_AppointmentBooking> </aura:if> </aura:component>
Bob 11
This is the helper