function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Gopal ChatGopal Chat 

In my code i want to show or hide None div based on input,if input is blank the div of none will show none,and email validation error

<aura:component implements="force:appHostable" controller="PropertyOnboardingApexController" >
    
    <aura:attribute name="enquiryName" type="String" default="" />
    <aura:attribute name="mobileNumber" type="String" default="" />
    <aura:attribute name="emailId" type="String" default="" />
    <aura:attribute name="companyName" type="String" default="" />
    <aura:attribute name="typeOfEnquiry" type="List" default="" />
    <aura:attribute name="selectedEnquiry" type="String" default="" />
    <aura:attribute name="typeOfProperty" type="List" default="" />
    <aura:attribute name="selectedPropertyType" type="String" default="" />
    <aura:attribute name="propertyArea" type="String" default="" />
    <aura:attribute name="country" type="String" default="" />
    <aura:attribute name="city" type="String" default="" />
    <aura:attribute name="address" type="String" default="" />
    
    <aura:handler name="init" value="{!this}" action="{!c.onLoad}" />
    <!--<lightning:spinner aura:id="mySpinner" variant="brand" size="medium" class="slds-hide"/>-->
      <lightning:spinner variant="brand" size="medium" aura:id="Id_spinner" class="slds-hide" />
    <lightning:card>
        <aura:set attribute="title">
            <div class="slds-text-heading_large slds-text-align_center">
                <b>Enquiry</b>
            </div>
        </aura:set>
        <div class="slds-grid slds-wrap">
            <div class="slds-col slds-size_1-of-12">
                
            </div>
            <div class="slds-col slds-size_10-of-12">
                <lightning:input name="input1" label="Name" placeholder="Enter Name..." value="{!v.enquiryName}" required="true"/>
                    <div class="slds-text-color_error" style="background-color:#fff;" aura:id="containerCollapsable">
                        <p>None</p>
                    </div>
            </div>
            <div class="slds-col slds-size_1-of-12">
                
            </div>
        </div>
        <br />
        <div class="slds-grid slds-wrap">
            <div class="slds-col slds-size_1-of-12">
                
            </div>
            <div class="slds-col slds-size_10-of-12">
                <lightning:input aura:id="mobile" name="input2" label="Mobile Number" maxlength="10" minlength="10"    placeholder="Enter Mobile Number..." value="{!v.mobileNumber}" required="true"/>
                    <div class="slds-text-color_error" style="background-color:#fff;">
                        <p>None</p>
                    </div>
            </div>
            <div class="slds-col slds-size_1-of-12">
                
            </div>
        </div>
        <br />
        <div class="slds-grid slds-wrap">
            <div class="slds-col slds-size_1-of-12">
                
            </div>
            <div class="slds-col slds-size_10-of-12">
                <lightning:input aura:id="email" name="input3" label="Email Id" placeholder="Enter Email Id..." value="{!v.emailId}" required="true"/>
                    <div class="slds-text-color_error" style="background-color:#fff;">
                         <p>None</p>
                    </div>
            </div>
            <div class="slds-col slds-size_1-of-12">
            </div>
        </div>
        <br/>
        <div class="slds-grid slds-wrap">
            <div class="slds-col slds-size_1-of-12">
                
            </div>
            <div class="slds-col slds-size_10-of-12">
                <lightning:input name="input4" label="Company Name" placeholder="Enter Company Name..." value="{!v.companyName}"/>
            </div>
            <div class="slds-col slds-size_1-of-12">
                
            </div>
        </div>
        <br />
        <div class="slds-grid slds-wrap">
            <div class="slds-col slds-size_1-of-12">
                
            </div>
            <div class="slds-col slds-size_10-of-12">
                <lightning:select name="typeId" label="Select Type" aura:id="typeId" value="{!v.selectedEnquiry}" required="true">
                    <option text="---Choose Type---" value="0" />
                    <aura:iteration items="{!v.typeOfEnquiry}" var="option">
                        <option text="{!option}" value="{!option}"/>
                    </aura:iteration>
                </lightning:select>
                    <div class="slds-text-color_error" style="background-color:#fff;">
                        <p>None</p>
                    </div>
            </div>
            <div class="slds-col slds-size_1-of-12">
                
            </div>
        </div>
        <br />
        <div class="slds-grid slds-wrap">
            <div class="slds-col slds-size_1-of-12">
                
            </div>
            <div class="slds-col slds-size_10-of-12">
                <lightning:select name="propertyId" label="Select Property Type" aura:id="propertyId" value="{!v.selectedPropertyType}" required="true">
                    <option text="---Choose Property Type---" value="0" />
                    <aura:iteration items="{!v.typeOfProperty}" var="option">
                        <option text="{!option}" value="{!option}" />
                    </aura:iteration>
                </lightning:select>
                    <div class="slds-text-color_error" style="background-color:#fff;">
                         <p>None</p>
                    </div>
            </div>
            <div class="slds-col slds-size_1-of-12">
                
            </div>
        </div>
        <br/>
        <div class="slds-grid slds-wrap">
            <div class="slds-col slds-size_1-of-12">
                
            </div>
            <div class="slds-col slds-size_10-of-12">
                <lightning:input name="input6" label="Property Area" placeholder="Enter Property Area..." value="{!v.propertyArea}" required="true"/>
                    <div class="slds-text-color_error" style="background-color:#fff;">
                        <p>None</p>
                    </div>
            </div>
            <div class="slds-col slds-size_1-of-12">
                
            </div>
        </div>
        <br/>
        <div class="slds-grid slds-wrap">
            <div class="slds-col slds-size_1-of-12">
                
            </div>
            <div class="slds-col slds-size_10-of-12">
                <lightning:input name="input7" label="Country" placeholder="Enter Country..." value="{!v.country}" required="true"/>
                    <div class="slds-text-color_error" style="background-color:#fff;">
                         <p>None</p>
                    </div>
            </div>
            <div class="slds-col slds-size_1-of-12">
                
            </div>
        </div>
        <br />
        <div class="slds-grid slds-wrap">
            <div class="slds-col slds-size_1-of-12">
                
            </div>
            <div class="slds-col slds-size_10-of-12">
                <lightning:input name="input8" label="City" placeholder="Enter City..." value="{!v.city}" required="true"/>
                    <div class="slds-text-color_error" style="background-color:#fff;">
                         <p>None</p>
                    </div>
            </div>
            <div class="slds-col slds-size_1-of-12">
                
            </div>
        </div>
        <br />
        <div class="slds-grid slds-wrap">
            <div class="slds-col slds-size_1-of-12">
                
            </div>
            <div class="slds-col slds-size_10-of-12">
                <lightning:input name="input9" label="Address" placeholder="Enter Address..." value="{!v.address}" />
            </div>
            <div class="slds-col slds-size_1-of-12">
                
            </div>
        </div>
        <aura:set attribute="footer">
            <div class="slds-text-align_center">
                <lightning:button variant="brand" label="Save" title="Brand" onclick="{!c.handleClick}" />
            </div>
        </aura:set>
    </lightning:card> 
</aura:component>

({
    handleClick : function(component, event, helper) {
      //  var spinner = component.find("mySpinner");
          //component.find("Id_spinner").set("v.class" , 'slds-show');

        //$A.util.removeClass(spinner,"slds-hide");
        var action = component.get("c.handleClickApex");
        if(!helper.checkvalidation(component, event)){
            action.setParams({
            "enquiryName" : component.get('v.enquiryName'),
            "mobileNumber" : component.get('v.mobileNumber'),
            "emailId" : component.get('v.emailId'),
            "companyName" : component.get("v.companyName") ,
            "selectedEnquiry" : component.get("v.selectedEnquiry"),
            "selectedPropertyType" : component.get("v.selectedPropertyType"),
            "propertyArea" : component.get("v.propertyArea"),
            "country" : component.get("v.country"),
            "city" : component.get("v.city"),
            "address" : component.get("v.address")
        });
        action.setCallback(this,function(response){
          // component.find("Id_spinner").set("v.class",'slds-hide');
            if(response.getState() === "SUCCESS") {
                var navEvt = $A.get("e.force:navigateToSObject");
                navEvt.setParams({
                    "recordId": response.getReturnValue()
                });
                navEvt.fire();  
               // $A.util.addClass(spinner,"slds-hide");
            }   
        });
        $A.enqueueAction(action);
        }
    },
    onLoad : function(component,event,helper) {
       // var spinner = component.find("mySpinner");
      //  $A.util.removeClass(spinner,"slds-hide");
        var enquiryType = $A.get("$Label.c.EnquiryType");
        component.set("v.typeOfEnquiry",enquiryType.split(":"));
        var propertyType = $A.get("$Label.c.PropertyType");
        component.set("v.typeOfProperty",propertyType.split(":"));
      //  $A.util.addClass(spinner,"slds-hide");
    }
})

({
    checkvalidation : function(component, event) {
        var notBlank = false;
        if(!component.get('v.enquiryName')){
            notBlank = true;
        }
        else if(!component.get('v.mobileNumber')){
            var mobileValue=component.find("mobile").get("v.value");
            if(!mobileValue.match(/^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/)) {
                
            }
            notBlank = true;
        }else if(!component.get('v.emailId')){
            var emailValue=component.find("email").get("v.value");
            if(!emailValue.match(/^(([^<>()\[\]\\.,;:\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,}))$/)){
            }
            notBlank = true;
        }else if(!component.get("v.selectedEnquiry")){
            notBlank = true;
        }else if(!component.get("v.selectedPropertyType")){
            
            notBlank = true;
        }else if(!component.get("v.propertyArea")){
            
            notBlank = true;
        }else if(!component.get("v.country")){
            
            notBlank = true;
        }else if(!component.get("v.city")){
            
            notBlank = false;
        }
        return notBlank;
    }
})