0

I have a lightning-edit-record-form that has multiple lightning-input-field. My issue is that i need to have conditional validation. the lightning-inputs have required, but what I am trying to do is say, if all are empty, ignore the form and dont submit. When I try this my querySelectorAll is returning undefined when i do element.validity.valueMissing. So what I am trying to do is say, if element.validity.valueMissing returns true, and does this for all lightning-input, i can skip form submission. My problem is element.validity.valueMissing is crashing and keeps returning undefined no matter which way I try to parse it out and separate it. So, in other words, if first name is missing, you need last name. If last name is missing, you need first name. if both are missing, dont submit, and the component is finished. if both are present, submit and complete the record. So how can i get element.validity.valueMissing to return the boolean it is supposed to inside the lightning-input?

html

<template for:each={itemList} for:item="item" for:index="index">
<lightning-record-edit-form key={item.id} object-api-name="Register">

<lightning-input-field field-name="First_Name__c" variant="label-stacked"   required={makeRequired}>
<lightning-input-field field-name="Last_Name__c" variant="label-stacked"   required={makeRequired}>
<lightning-button variant="success" onclick={handleSubmit} name="submit" label="Submit" id="page-bottom">

js

handleSubmit() {
this.template.querySelectorAll('lightning-input-field').forEach(element => { 
                                                           if(element.validity.valueMissing){
                                                           // ^ this is what is not working
                                                           isEmpty = true; 
                                                          }
if(!isEmpty){
this.template.querySelectorAll('lightning-record-edit-form).forEach(element => {
                                                            element.submit();
                                                            });
}
}

2 Answers 2

0

In your code, it looks like you're trying to use the validity property on the lightning-input-field elements to check if they have a missing value (i.e. if they are empty). However, this property is not available on lightning-input-field elements.

Instead of using the validity property, you can use the value property on the lightning-input-field elements to check if they are empty. The value property will return the current value of the input field, which you can then check to see if it is empty or not.

Here's an example of how you might do this:

 handleSubmit() {
  // Keep track of whether any of the input fields are empty
  let isEmpty = false;

  // Get all of the lightning-input-field elements
  const inputFields = this.template.querySelectorAll('lightning-input-field');

  // Iterate over the input fields
  inputFields.forEach(element => {
    // Check if the value of the input field is empty
    if (!element.value) {
      // If the value is empty, set isEmpty to true
      isEmpty = true;
    }
  });

  if (!isEmpty) {
    // If no input fields are empty, get all of the lightning-record-edit-form elements
    const recordForms = this.template.querySelectorAll('lightning-record-edit-form');

    // Iterate over the record forms
    recordForms.forEach(element => {
      // Submit the form
      element.submit();
    });
  }
}
1
  • this almost works. i'm like 99% there. the problem is ignoring empty rows. think : firstName LastName SSN firstName LastName SSN firstName LastName SSN . if lastName and SSN are required, let's say rows 2 and 3 are emtpy. it throws an error. I cant find a way to treat a series of input fields as rows. my guess is iterating over the <template for:each itemList, then doing a validity and if so submit. that part i am unsure of how to do
    – sesanc
    Dec 9, 2022 at 8:50
0

To Validate a lightning-input-field, you need to use reportValidity() method which will evaluate the required attribute you mentioned on the markup

var isVal = true;
this.template.querySelectorAll('lightning-input-field').forEach(element => {
     isVal = isVal && element.reportValidity();
});
if (isVal) {
   this.template.querySelectorAll('lightning-record-edit-form').forEach(element => {
       element.submit();
   });
}

So basically in above code, I am submitting the form once making sure all the fields are valid.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .