javascript - 表单验证 -> 从标签元素 .innerText 获取的错误信息

Question

我正在尝试验证一种形式，如果不满足要求，我想在其中显示错误。在此错误中，我想重新使用标签文本。

我没走多远，因此控制台给我的错误是:

Uncaught TypeError: Cannot read properties of null (reading'innerText')at onSubmit (app.js:40:71)at HTMLFormElement.onsubmit (contact.html?userName=&userEmail=&userComment=:43:69)

根据我的理解，元素/标签中的文本(名称、电子邮件、评论)应该存储到 let label。但它在 .innerText 处给了我错误。

'use strict';
const onSubmit = event => {
  event.preventDefault()
  for (let element of event.target)
    if (element.required) {
      let label = document.getElementById(`${element.id}-label`).innerText
      let error = ""
      switch (element.type) {
        case 'text':
          if (!isNullOrEmpty(element.value)) {
            if (!isMinLength(element.value, element.dataset.requiredMin)) {
              error = `Your ${label.toLocaleLowerCase()} must contain at least ${element.dataset.requiredMin} letters.`
            }
          } else {
            error = `You must enter a ${label.toLocaleLowerCase()}`
          }
          console.log('validera text');
          break;
        case 'email':
          console.log('validera email');
          break;
        case 'textarea':
          console.log('validera lösenord');
          break;
      }
      document.getElementById(`${element.id}-error`).innerText = error
    }
}

const isNullOrEmpty = value => {
  if (value.length === 0)
    return true

  return false
}

const isMinLength = (value, minLength = 2) => {
  if (value.length >= minLength)
    return true
  return false
}

<section class="form container">
  <h1>Come in Contact with Us</h1>
  <form onsubmit="onSubmit(event)" class="contact" novalidate>
    <div class="name_email">
      <span>
        <label id="userName-label" for="userName-input">Name</label>
        <input type="text" name="userName" id="userName-input" placeholder="Your Name" required data-required-min="2">
        <div id="userName-error"></div>
      </span>
      <span>
        <label id="userEmail-label" for="userEmail-input">Email</label>
        <input type="email" name="userEmail" id="userEmail-input" placeholder="Your Email" required>
        <div id="userEmail-error"></div>
      </span>
    </div>
    <div>
      <label id="userComment-label" for="userComment-input">Comments</label>
      <textarea type="text" name="userComment" id="userComment-input" placeholder="Comments" required data-required-min="10"></textarea>
      <div id="userComment-error"></div>
    </div>
    <div class="submitbutton">
      <button type="submit" class="button bg-red">Post Comments</button>
    </div>
  </form>
</section>

Answer 1

问题出在 document.getElementById 的参数中。您的 for 循环遍历 input 元素，而不是 label。

只需在 Html 中更改输入的 id 值，删除末尾的 -input。或者，这样的事情应该有效。

'use strict';
const onSubmit = event => {
    event.preventDefault()
    console.log("el:",event.target)
    for (let element of event.target)
        if (element.required) {
            console.log("=>",element.id)
             // look at it
            let label = document.getElementById(`${element.id}`.replace('input','label').innerText
            let error = ""
            switch(element.type) {
                case 'text':
                    if (!isNullOrEmpty(element.value)) {
                        if (!isMinLength(element.value, element.dataset.requiredMin)) {
                            error = `Your ${label.toLocaleLowerCase()} must contain at least ${element.dataset.requiredMin} letters.`
                        }
                    } else {
                        error = `You must enter a ${label.toLocaleLowerCase()}`
                    }
                    console.log('validera text');
                    break;
                case 'email':
                    console.log('validera email');
                    break;
                case 'textarea':
                    console.log('validera lösenord');
                    break;
            }

            // look at it          
            document.getElementById(`${element.id}`.replace("input","error")).innerText = error
        }
}

const isNullOrEmpty = value =>{
    if (value.length === 0)
        return true
    
    return false
}

const isMinLength = (value, minLength = 2) =>{
    if (value.length >= minLength)
        return true

    return false
}