In LWC - Showing next component on click of next button before required fields are filled?

Question

I that I have created 3 separate component. The look like this

Employee Form :

      CMP1 Personal Information
              fname (Required):
              lname :
              gender:
              email :
              contact :
     CMP2 Address :
              home (Required)
               city :
              state :
              pincode :
              Country :

     CMP3 Experience :
             company name (Required) :
             address :
            CmpEmail :
            duration :

Note : one time only one component visible

but after creating the component here are some issue like without filling the required fill on click of next button the next component visible. So this should not happen here, only after filling the entire required field, the second component should be clicked on the next button.

HTML: EmployeeFormCompo.html

    <template>
        <lightning-card title="Employee Form" icon-name="custom:custom14">
          <div class="slds-m-around_medium">
            <!-- CMP1 Personal Information -->
            <template if:true={showCMP1}>
                <c-personal-copmpo></c-personal-copmpo>
            </template>

            <!-- CMP2 Address -->
            <template if:true={showCMP2}>
                <c-address-compo></c-address-compo>
            </template>


            <!-- CMP3 Experience -->
            <template if:true={showCMP3}>
                <c-experience-compo></c-experience-compo>
            </template>
            <br />
            <!-- Next and Previous Buttons -->
            <div class="slds-align_absolute-center">
                <lightning-button label="Previous" variant="brand" onclick={handlePrevious} 
        icon-name="utility:back"></lightning-button>
                &nbsp;&nbsp;
                <lightning-button label="Next" onclick={handleNext} variant="brand" icon- 
     name="utility:chevronright"></lightning-button>
            </div >
            
        </div>
       </lightning-card>
      </template>

JS : EmployeeFormCompo.js

      import { LightningElement, track } from 'lwc';

     export default class EmployeeFormCompo extends LightningElement {

    @track showCMP1 = true;
    @track showCMP2 = false;
    @track showCMP3 = false;

    handlePrevious() {
        if (this.showCMP1) {
            return; // already at the first component, do nothing
        } else if (this.showCMP2) {
            this.showCMP1 = true;
            this.showCMP2 = false;
        } else if (this.showCMP3) {
            this.showCMP2 = true;
            this.showCMP3 = false;
           }
       }

       handleNext() {
        if (this.showCMP1) {
            this.showCMP2 = true;
            this.showCMP1 = false;
           } else if (this.showCMP2) {
            this.showCMP3 = true;
            this.showCMP2 = false;
           } else if (this.showCMP3) {
            return; // already at the last component, do nothing
          }
      }

       handleSignUp(){
         console.log('handleSignUp button');
      }
     }

HTML: personalCopmpo.html

    <template>
      <lightning-card>
          <div class="slds-m-around_medium">
            <lightning-input label="First Name" type="text" required> 
      </lightning-input>
            <lightning-input label="Last Name" type="text"></lightning- 
      input>
            <lightning-combobox name="Gender" label="Gender" value= 
     {Gender} placeholder="Select Gender"
                options={Gender}></lightning-combobox>
            <lightning-input label="Email" type="Email" ></lightning- 
      input>
            <lightning-input label="Phone" type="Number"></lightning- 
     input>
        </div>
        </lightning-card>
     </template>

JS: personalCopmpo.js

     import { LightningElement } from 'lwc';

     export default class PersonalCopmpo extends LightningElement {

       get Gender() {
          return [
            { label: 'Male', value: 'Male' },
            { label: 'Female', value: 'Female' },
            { label: 'Transgender', value: 'Transgender' },
           ];
         }
      }

HTML: addressCompo.html

      <template>
         <lightning-card>
          <div class="slds-m-around_medium">
            <lightning-textarea max-length=”100″ message-when-value- 
       missing='Please enter the Address'
                label='Home Address' required value={description} > 
       </lightning-textarea>
            <lightning-combobox name="Country" label="Country" value= 
      {Country} placeholder="Select Country"
                options={Country}></lightning-combobox>
            <lightning-combobox name="State" label="State" value= 
        {State} placeholder="Select State"
                options={State}></lightning-combobox>
            <lightning-combobox name="City" label="City" value={City} 
        placeholder="Select City"
                options={City}></lightning-combobox>
            <lightning-input label="Pin Code" type="Number"> 
       </lightning-input>
          </div>
        </lightning-card>
     </template>

JS: addressCompo.js

     import { LightningElement } from 'lwc';

     export default class AddressCompo extends LightningElement {
    
        get Country() {
          return [
            { label: 'India', value: 'India' },
            { label: 'Sri-Lanka', value: 'Sri-Lanka' },
            { label: 'Pakistan', value: 'Pakistan' },
            { label: 'England', value: 'England' },
            { label: 'America', value: 'America' },
            { label: 'New-Zeland', value: 'New-Zeland' },
            { label: 'Bangladesh', value: 'Bangladesh' },
            { label: 'China', value: 'China' },
            { label: 'Itly', value: 'Itly' },
            
            ];
         }

         get State() {
            return [
            { label: 'Maharashtra', value: 'Maharashtra' },
            { label: 'Rajstan', value: 'Rajstan' },
            { label: 'Orisa', value: 'Orisa' },
            { label: 'Karnataka', value: 'Karnataka' },
            { label: 'Goa', value: 'Goa' },
            ];
         }

          get City() {
            return [
            { label: 'Nagpur', value: 'Nagpur' },
            { label: 'Pune', value: 'Pune' },
            { label: 'Bangalore', value: 'Bangalore' },
            { label: 'Mumbai', value: 'Mumbai' },
            { label: 'Wani', value: 'Wani' },
            ];
         }
       }

HTML: experienceCompo.html

     <template>
        <lightning-card>
           <div class="slds-m-around_medium">
            <lightning-input label="Company Name" type="text" required> 
      </lightning-input>
            <lightning-input label="Address" type="text"></lightning- 
        input>
            <lightning-input label="CmpEmail" type="Email" required> 
       </lightning-input>
            <lightning-input label="Duration" type="Number"> 
        </lightning-input><br />
            <lightning-button label="Sign Up" onclick={handleSignUp} 
          variant="destructive"
                icon-name="utility:adduser"></lightning-button>
            </div>
         </lightning-card>
         </template>

JS: experienceCompo.js

          import { LightningElement } from 'lwc';

           export default class ExperienceCompo extends 
         LightningElement {

       }

Could you please add more clarity in the question w.r.t. exact issue so that we can better help you ? — Rohit
– Rohit, Commented Mar 13, 2023 at 11:16
Can you please add code for personal-copmpo which shows what you are using for capturing data ? — Rohit
– Rohit, Commented Mar 13, 2023 at 11:58
@Rohit I have added all component code and component SS. So, Please help me to solve them. — Crazy Man
– Crazy Man, Commented Mar 13, 2023 at 12:17

Rohit · Accepted Answer · 2023-03-13 12:42:17Z

For each section , you can try below approach :

Step 1 : Add a identifier for the required fields , in below example , I added required class.

<div class="slds-m-around_medium">
    <lightning-input label="First Name" type="text" class="required" required>
    </lightning-input>
</div>

Step 2 : In the handleNext click handler , check for the input validity using below function. (We check for the validity using checkValidity for lightning-input)

validateInput(fieldsToValidate) {
  let isValid = true;
  fieldsToValidate.forEach(inputField => {
      if(!inputField.checkValidity()) {
          inputField.reportValidity();
          isValid = false;
      }
  });
  return isValid;
}

Step 3 : handleNext should look something like this : (You can handle the section visibility in if block.) If a field is blank , reportValidity function will highlight it.

handleNext() {
  //Pass the input fields to the validate function
  const fieldsToValidate = this.template.querySelectorAll(".required");
  const isScreenValid = this.validateInput(fieldsToValidate);

  if(isScreenValid) {
    //Navigate to next screen
  }
  else {
    //error handling
    console.log("In else ");
  }

}

Reference : https://developer.salesforce.com/docs/component-library/bundle/lightning-input/specification

@CrazyMan : You need to incorporate css which you originally had. Do not replace html from the answer. Answer is for illustration purpose. You need to add JS changes. — Rohit
– Rohit, Commented Mar 13, 2023 at 14:37
I'am trying to give you an idea of the solution. I cannot provide exact answer here since I do not have the entire context. — Rohit
– Rohit, Commented Mar 13, 2023 at 14:38

Stack Exchange Network

In LWC - Showing next component on click of next button before required fields are filled?

1 Answer 1

You must log in to answer this question.

Hot Network Questions

In LWC - Showing next component on click of next button before required fields are filled?

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions