Кнопка «Отмена» в HTML-форме

Допустим, в форме есть поля, обязательные для заполнения, и пара кнопок: Сохранить и Отмена. Как реализовать кнопку «Отмена»?

Можно сделать переход на заданный URL без отправки формы, типа так:

<form action="..." method="post">
Обязательное поле: <input type="text" name="example" required autofocus><br>
<input type="submit" value="Сохранить">
<input type="button" value="Отмена" onclick="document.location.href='...'">
</form>

В принципе, такой прием работает. Но что, если при нажатии «Отмена» нам в любом случае надо выполнить некие действия, то есть надо, чтобы нажатая кнопка определялась на самом сервере? Можно сделать две кнопки submit:

<form action="..." method="post">
Обязательное поле: <input type="text" name="example" required autofocus><br>
<input type="submit" name="save" value="Сохранить">
<input type="submit" name="cancel" value="Отмена">
</form>

Теперь на сервере можно понять, какая из кнопок была нажата:

if ( isset($_POST["cancel"] ){
  // отменяем...
} else {
  // сохраняем...
}

Но тут есть проблема, так как у нас имеется обязательное (атрибут required) поле example. Браузер не даст отправить форму, если пользователь не заполнит это поле. И правильно, когда нажимаем кнопку «Сохранить», поле обязано быть заполнено.

НО! Когда нажимаем кнопку «Отмена», поле может быть пустым, тут-то нам проверка уже не нужна. Но браузер все равно не даст даже нажать отмену, пока не заполним это поле.

Так вот в итоге назрел вопрос: а как это обойти? Как сделать, чтобы при нажатии одной кнопки (Сохранить) была проверка обязательных полей, но при нажатии другой (Отмена) проверка не проводилась?

(читать всё…)