Как установить пользовательское сообщение об проверке для HTML -ввода на MouseEnter? ⇐ Html

[Anonymous]

У меня есть основной проект ASP.NET, и я пытаюсь установить пользовательский текст для подсказки инструментов проверки для поля ввода HTML Form. По умолчанию он показывает «Пожалуйста, заполните это поле». Я попытался добавить слушателей событий для ввода, изменений и такими событиями мышиного сустава.

Код: Выделить всё

Field1:

Field1:



function validateInputElement(element)
{
let validationMessage = "";
if(element.validity !== ValidityState.valid)
{
validationMessage = element.dataset["errorMessage"];
}
else if(document.querySelector("input#field1")?.value === document.querySelector("input#field2")?.value)
{
validationMessage = "You must enter different values!"
}
element.setCustomValidity(validationMessage);
element.reportValidity();
}


< /code>
< /div>
< /div>

В данном случае отображаются мои пользовательские сообщения проверки, но также отображаются сообщения о проверке по умолчанию. Как отключить сообщения об проверке по умолчанию?if(element.validity !== ValidityState.valid)
< /code>
to < /p>
if(!element.validity.valid)
< /code>
Результирующий фрагмент кода-< /p>


 "



Field1:

Field1:



function validateInputElement(element)
{
let validationMessage = "";
if(!element.validity.valid)
{
validationMessage = element.dataset["errorMessage"];
}
else if(document.querySelector("input#field1")?.value === document.querySelector("input#field2")?.value)
{
validationMessage = "You must enter different values!"
}
element.setCustomValidity(validationMessage);
element.reportValidity();
}


< /code>
< /div>
< /div>
< /p>
Но я также хочу, чтобы недопустимое поле не было автоматически сосредоточено на мосеентере.  />  





Field1:

Field1:



let validMsgTimeouts = {};
function validateInputElement(element)
{
let validationMessage = "";
if(!element.validity.valid || document.querySelector("input#field1")?.value?.trim() === document.querySelector("input#field2")?.value?.trim())
{
validationMessage = element.dataset["errorMessage"];
}
element.setCustomValidity(validationMessage);
element.reportValidity();
if(validationMessage?.trim()?.length > 0)
{
validMsgTimeouts[element.id] = setTimeout(function()
{
element.setCustomValidity(" ");
element.reportValidity();
if(validMsgTimeouts[element.id] > 0)
{
clearTimeout(validMsgTimeouts[element.id]);
}
}, 1000);
}
}
let nodeList = document.querySelectorAll("input.validate");
for(curElem of nodeList)
{
curElem.addEventListener("input", function(event)
{
event.target.setCustomValidity("");
event.target.reportValidity();
});
curElem.addEventListener("change", function(event)
{
validateInputElement(event.target);
});
curElem.addEventListener("mouseenter", function(event)
{
validateInputElement(event.target);
});
curElem.addEventListener("mouseleave", function(event)
{
let activeElement = document.activeElement;
if(activeElement === event.target && activeElement.validationMessage?.trim()?.length > 0)
{
if(validMsgTimeouts[event.target.id] > 0)
{
clearTimeout(validMsgTimeouts[event.target.id]);
}
activeElement.blur();
}
});
}

Подробнее здесь: https://stackoverflow.com/questions/797 ... mouseenter