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

Question

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

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

这或多或少是我的代码

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

有什么想法吗？谢谢！

Answer 1

问题是您使用未实现验证 API 的点击处理程序定位 <option> 元素。您需要做的是监听 change and input 事件。

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

这些将在执行验证 API.

的父 <select> 元素上触发

这是一个工作示例：

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>

Answer 2

已编辑 12/01：这是我的解决方案。感谢Rúnar Berg

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++) {
    if (!y[i].classList.contains("um-user-keyword_0")){
        y[i].addEventListener('keyup', errorMsj, false);
        y[i].addEventListener('click', errorMsj, false);
        y[i].addEventListener('invalid', errorMsj, false);
    } else {
        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="">  <!-- input text works great. -->

<select name="DEMO2" id="DEMO2" class="um-form-field" required=""><option value=""></option><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 um-user-keyword_0" required=""><option value=""></option><option value="one">one</option><option value="two">two</option><option value="three">three</option></select>  <!-- input multiselect does not work well. -->

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

event.target.setCustomValidity is not a function at HTMLSelectElement in Javascript

html

javascript

dom

html-validation