javascript - event.target.setCustomValidity 不是 Javascript 中 HTMLSelectElement 的函数

Question

我有一个带有 JS 客户端验证的表单。

当用户单击或键入字段时，将在该字段下方显示一条消息。这适用于输入类型文本和选择字段。但不适用于多选字段。有时会出现错误消息，有时不会。我不确定我必须采取什么方法来解决它：/

这或多或少是我的代码

var y = document.querySelectorAll(".um-form-field:not(.not-required)");//I get all the inputs except the ones that are not needed


var i;
 for (i = 0; i < y.length; i++) {
    y[i].addEventListener('keyup', errorMsj, false);
    y[i].addEventListener('click', errorMsj, false);
    y[i].addEventListener('invalid', errorMsj, false);  
 };

function errorMsj (event) {
 if (event.target.value.length == 0) {
  event.target.style.background = "#eb91ae";
  event.target.setCustomValidity("error");
  divError.style.display = "block";
  divError.innerHTML  = "You must complete this field"
  event.target.parentElement.appendChild(divError);
 } else {
  event.target.style.background = "#9deb91";
  event.target.setCustomValidity("");
  divError.style.display = "none";
  }
}

//create a div for error message
var divError = document.createElement("DIV");
divError.style.display = "none";
divError.className = "um-field-error";

<input class="um-form-field" type="text" name="DEMO" id="DEMO" value="" required="">  <!-- input text works great. -->

<select name="DEMO2" id="DEMO2" class="um-form-field" required=""><option value="one">one</option><option value="two">two</option><option value="three">three</option></select>  <!-- input select works great. -->

<select multiple="multiple" name="DEMO3" id="DEMO3" class="um-form-field" required=""><option value="one">one</option><option value="two">two</option><option value="three">three</option></select>  <!-- input multiselect does not work well. -->

这是我在控制台中遇到的错误： Uncaught TypeError: event.target.setCustomValidity is not a function at HTMLSelectElement.errorMsj

有任何想法吗？谢谢！

标签： javascripthtmldomhtml-validation

Answer 1

问题是您<option>使用未实现验证 API 的单击处理程序来定位元素。相反，您需要做的是监听changeandinput事件。

y[i].addEventListener('change', errorMsj, false);
y[i].addEventListener('input', errorMsj, false);

这些将在<select>实现验证 API 的父元素上触发。

这是一个工作示例：

var y = document.querySelectorAll(".um-form-field:not(.not-required)");

var i;
 for (i = 0; i < y.length; i++) {
    // NOTE! Target `change` and `input` events
    y[i].addEventListener('change', errorMsj, false);
    y[i].addEventListener('input', errorMsj, false);
    y[i].addEventListener('invalid', errorMsj, false);  
 };

function errorMsj (event) {
 if (event.target.value.length == 0) {
  event.target.style.background = "#eb91ae";
  event.target.setCustomValidity("error");
  divError.style.display = "block";
  divError.innerHTML  = "You must complete this field"
  event.target.parentElement.appendChild(divError);
 } else {
  event.target.style.background = "#9deb91";
  event.target.setCustomValidity("");
  divError.style.display = "none";
  }
}

//create a div for error message
var divError = document.createElement("DIV");
divError.style.display = "none";
divError.className = "um-field-error";

<input class="um-form-field" type="text" name="DEMO" id="DEMO" value="" required="">

<select name="DEMO2" id="DEMO2" class="um-form-field" required=""><option value="one">one</option><option value="two">two</option><option value="three">three</option></select>

<select multiple="multiple" name="DEMO3" id="DEMO3" class="um-form-field" required=""><option value="one">one</option><option value="two">two</option><option value="three">three</option></select>