Lightning Web Components – Fixing Undefined Error with Validity.valueMissing

javascriptlightning-web-components

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();
                                                            });
}
}

Best Answer

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();
    });
  }
}
Related Topic