使用 Vanilla JavaScript 表单“必需”验证

Question

如果必填字段留空，我想显示必填错误消息。我使用以下方式实现它，但是每次调用函数 checkinput() 时，它都会添加一个新的 span 元素，因此会多次输出“必需”消息。我希望 span 元素添加一次并在用户填写要求时消失。这是我的代码。

const checkinput=(event)=>{
        if(event.target.value===""){
            event.target.insertAdjacentHTML('afterend','<span class="text-danger">Required</span>')
        }
        if(event.target.value!==""){
            var child=document.querySelector('span');
            child.remove();
        }
        

    }
    document.getElementById("username").addEventListener('blur',checkinput);
    document.getElementById("password").addEventListener('blur',checkinput);
    document.getElementById("confirmPassword").addEventListener('blur',checkinput);

Answer 1

你需要类似的东西

    if(event.target.value==="" && document.querySelector('span') === null){
        event.target.insertAdjacentHTML('afterend','<span class="text-danger">Required</span>')
    }
    if(event.target.value!==""){
        var child=document.querySelector('span');
        child.remove();
    }

如果值为空字符串并且尚未添加跨度，则您只想添加跨度。

Answer 2

每次输入字段为空时都会添加新的span 元素的原因是因为您每次都调用insertAdjacentHTML 并插入一个新的span 元素。

您应该做的是在 html 中的每个输入字段中添加 span 元素，最初它们应该是空的。当您想要验证输入字段时，如果任何输入为空，请选择 span 元素在该输入元素旁边并使用.textContent 属性在该span 元素中显示错误消息。要清除错误信息，只需将span 元素的.textContent 设置为空字符串即可。

以下代码 sn-ps 显示了验证表单输入的不同方式。

表单提交时的表单验证

以下代码 sn-p 在提交表单时验证表单输入。

const form = document.querySelector('form');
const usernameError = document.querySelector('#usernameError');
const passwordError = document.querySelector('#passwordError');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const usernameValid = validateField(form, 'username', usernameError);
  const passwordValid = validateField(form, 'password', passwordError);

  if (usernameValid && passwordValid) {
    console.log('form submitted');
    form.reset();
  }
});

function validateField(form, fieldName, errorEl) {
  if (form.elements[fieldName].value == '') {
    errorEl.textContent = `${fieldName} is required`;
    return false;
  } else {
    errorEl.textContent = '';
    return true;
  }
}

form div {
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  max-width: 200px;
}

form label { margin: 0 0 5px; }
span { color: red; }

<form>
  <div>
    <label>Username</label>
    <input type="text" name="username" />
    <span id="usernameError"></span>
  </div>
  <div>
    <label>Password</label>
    <input type="password" name="password" />
    <span id="passwordError"></span>
  </div>
  <button>Submit</button>
</form>

输入焦点松散的表单验证

以下代码 sn-p 在任何输入失去焦点时验证表单输入。

const form = document.querySelector('form');
const inputsContainer = document.getElementById('formInputsContainer');
const submitBtn = document.querySelector('button');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const usernameValid = validateField(form, 'username');
  const passwordValid = validateField(form, 'password');

  if (usernameValid && passwordValid) {
    console.log('form submitted');
    form.reset();
  }
});

submitBtn.addEventListener('focus', () => {
  form.requestSubmit();
});

inputsContainer.addEventListener('focusout', (event) => {
  validateField(form, event.target.name);
});

function validateField(form, fieldName) {
  const errorEl = document.getElementById(`${fieldName}Error`);

  if (form.elements[fieldName].value == '') {
    errorEl.textContent = `${fieldName} is required`;
    return false;
  } else {
    errorEl.textContent = '';
    return true;
  }
}

form div {
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  max-width: 200px;
}

form label { margin: 0 0 5px; }
span { color: red; }

<form>
  <div id="formInputsContainer">
    <div>
      <label>Username</label>
      <input type="text" name="username" />
      <span id="usernameError"></span>
    </div>
    <div>
      <label>Password</label>
      <input type="password" name="password" />
      <span id="passwordError"></span>
    </div>
  </div>
  <button>Submit</button>
</form>

用户在输入字段中输入时的表单验证

以下代码 sn-p 在用户在任何输入字段中输入时验证表单输入。

const form = document.querySelector('form');
const inputsContainer = document.getElementById('formInputsContainer');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const usernameValid = validateField(form, 'username');
  const passwordValid = validateField(form, 'password');

  if (usernameValid && passwordValid) {
    console.log('form submitted');
    form.reset();
  }
});

inputsContainer.addEventListener('input', (event) => {
  validateField(form, event.target.name);
});

function validateField(form, fieldName) {
  const errorEl = document.getElementById(`${fieldName}Error`);

  if (form.elements[fieldName].value == '') {
    errorEl.textContent = `${fieldName} is required`;
    return false;
  } else {
    errorEl.textContent = '';
    return true;
  }
}

form div {
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  max-width: 200px;
}

form label { margin: 0 0 5px; }
span { color: red; }

<form>
  <div id="formInputsContainer">
    <div>
      <label>Username</label>
      <input type="text" name="username" />
      <span id="usernameError"></span>
    </div>
    <div>
      <label>Password</label>
      <input type="password" name="password" />
      <span id="passwordError"></span>
    </div>
  </div>
  <button>Submit</button>
</form>

Answer 3

您可以使用此代码创建一个跨度，该跨度使用基于表单元素的名称属性的ID 添加到 DOM。并且可以根据在添加到 DOM 之前附加到它的 ID 来引用该元素

const checkinput=(event)=>{
    if(event.target.value===""){
        let spanId = `input-${event.target.name}`
        let span = `<span id="${spanId}" class="text-danger">Required</span>`
        setTimeout(() =>{
            document.getElementById(spanId).remove();
        }, 5000);
        event.target.insertAdjacentHTML('afterend',span)

    }
}
document.getElementById("username").addEventListener('blur',checkinput);
document.getElementById("password").addEventListener('blur',checkinput);
document.getElementById("confirmPassword").addEventListener('blur',checkinput);

<form>
  <input type="text" name="username" id="username"/>
  <input type="text" name="password" id="password"/>
  <input type="text" name="confirmPassword" id="confirmPassword"/>
</form>

Answer 4

希望对您有帮助

    <style>
      .errorMsg {
        border: 1px solid red;
      }
      .err {
        color: red;
      }
    </style>
    <form>
      <input type="text" name="name" id="name">
      <input type="password" name="password" id="password">
      <button id="submit" type="submit">Submit</button>
    </form>

    <script>
      let nameTag = document.querySelector('#name');
      let passwordTag = document.querySelector('#password');
      let submitBtn = document.querySelector('#submit');

      nameTag.addEventListener('blur', e => validation(e));
      passwordTag.addEventListener('blur', e => validation(e));

      function validation(e) {
        if (e.target.value == '') {
          e.target.classList.add('errorMsg')
          submitBtn.setAttribute('disabled', true) // Disable submit that user cannot submit
          e.target.insertAdjacentHTML('afterend', `<span class="err ${e.target.id}">It is required</span>`) 
// In the above line we are inserting an element with class same as id of input that in the remove we remove a particular error message only
        } else {
          e.target.classList.remove('errorMsg')
          submitBtn.removeAttribute('disabled')
          document.querySelector(`.err.${e.target.id}`).remove();
//Here code is saying that the element with if 'err' and 'class same as id of input' if both class present then remove it 
        }
      }
    </script>

• 添加 class= id 被特殊错误消息删除