Показать всплывающую подсказку с обязательным атрибутом, нажав

Question

Например у меня есть вход:

<input type="text" id="username" required></input>

А также у меня есть <button onclick="test_click()"></button>.

function test_click(){ 
    // 
    // Here i check user input 
    // 
} 

Как я могу показать подсказку об ошибке после нажатия кнопки, если неправильный ввод данных пользователя? Мне нужно выполнить событие oninvalid, как я могу это сделать?

спасибо.

Answer 1

Как правило, я использовал бы скрытые элементы dom, чтобы обеспечить такую ​​обратную связь. Точно, какие элементы dom использовать, зависит от того, как вы хотите, чтобы подсказка об ошибке появилась.

Например, у вас может быть <span> или <img>, расположенный непосредственно рядом с <input> с содержимым, отображающим подсказку об ошибке. Первоначально вы хотите установить стиль для этого элемента, чтобы он включал display: none;, чтобы он не отображался. Затем в вашей функции test_click() вы можете изменить стиль на display: inline; или display: block; и т. Д. (В зависимости от выбранного вами элемента).

Если вы используете JQuery, это может выглядеть примерно так:

function test_click(){ 
    if (error_condition) 
    { 
     $("#errorElementID").css("display","inline"); 
    } 
} 

Если вы не используете JQuery, это может выглядеть следующим образом:

function test_click(){ 
    if (error_condition) 
    { 
     document.GetElementById("errorElementID").style.display = "inline"; 
    } 
}