Отображение диалогового окна alert (), если форма не имеет допустимых значений

Question

У меня есть простая форма, которая принимает переменную заголовка и содержимого из текстового поля и текстовой области.Форма отправит свои данные в файл с именем add-post.php.Тем не менее, я ищу способ предупредить пользователя о том, что текстовое поле или текстовое поле имеют недопустимые данные (пусто) в случае, если они нажимают кнопку отправки.

Я думал, что всплывающее окно alert() будет лучшей идеей, потому что оно не перенаправляет на любую другую страницу, и пользователь никогда не теряет свои данные (представьте, что они ввели много текста, но забылиtitle. Отправка данных на add-post.php и выполнение там проверки приведет к потере данных для пользователя).

Однако я не уверен, как на самом деле реализовать всплывающее окно alert().Как бы я сделал так, чтобы проверка была выполнена ПОСЛЕ того, как они нажали кнопку отправки, но ДО того, как данные будут отправлены в следующий файл.Любой совет приветствуется.

Answer 1

В вашей форме добавьте что-то вроде этого

<form name="frm1" onsubmit="InputChecker()">

Затем в javascript

<script type="text/javascript">
function InputChecker()
{
    if(document.getElementById({formElement}) != '')  { // not empty
        alert("This element needs data"); // Pop an alert
        return false; // Prevent form from submitting
    }
}
</script>

Также, как говорили другие, jQuery делает это немного проще.Я настоятельно рекомендую плагин jQuery Validate

Некоторые люди считают окно оповещения «раздражающим», поэтому может быть лучше добавить сообщение в DOM, чтобы сообщить пользователю, что необходимобыть исправленным.Это полезно, если есть многочисленные ошибки, так как ошибки будут более постоянными, позволяя пользователю видеть все, что ему нужно исправить.Опять же, плагин jQuery Validate имеет эту встроенную функциональность.

Answer 2

Прикрепите событие onsubmit к форме и return false;, чтобы остановить отправку, если проверки не пройдены.

Answer 3

Проверка формы с помощью Javascript . Или проще с jQuery .

По сути, проверяйте форму при нажатии кнопки отправки (с обработчиком отправки), а затем используйте поле оповещения () при необходимости.Кстати, люди обычно ненавидят окна оповещения.

Answer 4

У вас есть несколько вариантов, когда дело доходит до проверки на стороне клиента.Это всего лишь один.

<form id="tehForm" method="post">
    <input type="text" id="data2check" >
    <input type="button" id="btnSubmit"  />
</form>
<script type="text/javascript">
    function submit_form(){
        if(document.getElementById("data2check").value!="correct value"){
            alert("this is wrong");

        }else{
            document.getElementById("tehForm").submit();
        }
    }
</script>

Для более глубокого примера посмотрите эту ссылку