Простым подходом здесь является использование простого JavaScript для выполнения всей тяжелой работы. Давайте кратко рассмотрим.
Сначала мы изложим HTML-форму
<!DOCTYPE html>
<html>
<body>
<form action="/" method="post" onsubmit="return validateForm();">
Username: <input id="username" type="text" name="username">
<input type="submit">
</form>
</body>
</html>
Теперь обратите внимание на директиву form, в которой упоминаются method, action и onsubmit. Давайте пройдемся по всем этим по частям.
Я уверен, что вы полностью осведомлены о том, что делают method и action, но для части onsubmit она связана с функцией JavaScript с именем validateForm(), которая определена следующим образом:
function validateForm() {
var username = document.getElementById( 'username' ).value;
if( !username ) {
return false;
}
return true;
}
Эта функция получает значение элемента username в форме и возвращает false, если он пуст, и true в противном случае. Это говорит о том, что триггеры событий должны перейти к отправке формы на action с использованием глагола method, если результирующее значение было true; однако, если это было false, это просто останавливает выполнение. Так же, как мы используем ключевое слово return, чтобы сломать текущий элемент управления.
Так что, в некотором смысле, он запускается перед вашим onClick обработчиком. Очень тонким способом в том смысле, что он не позволит форме опубликовать , если проверка не пройдена.
Теперь, конечно, вы можете отредактировать его в соответствии с вашими потребностями, просто добавив диалог confirm, который будет возвращать true, если нажата OK или YES и false в противном случае. Но это должно дать вам хороший пример того, что вы можете сделать, в частности, с атрибутом onsubmit и с атрибутами в целом.
Надеюсь, это ответит на ваш вопрос! Вы можете найти скрипку здесь .