Ошибка проверки формы HTML5 всплывает при вызове jQuery .show ()

Question

Ошибка проверки формы HTML5 всплывает при вызове jQuery .show ()

0

Я создаю форму HTML5 с несколькими страницами. Каждая "страница" формы находится в DIV, которая скрыта/показана вызовом jQuery.hide() или.show(), когда нажимается соответствующий элемент BUTTON.

Проблема заключается в следующем: при отображении последующих страниц проверка проверки, по-видимому, вызывается автоматически, и сообщения об ошибках появляются в требуемом поле мгновенно, прежде чем пользователь сможет что-либо сделать. Что-то случайно вызывает вызов проверки формы?

Простой пример:

<div class="page" id="page_1" style="display:block;">
    <input type="text" name="first_name" required>
    <button onclick="$('#page_1').hide(); $('#page_2').show();">Next</button>
</div>

<div class="page" id="page_2" style="display:none;">
    <input type="text" name="last_name" required>
</div>

После сокрытия страницы 1 и отображения страницы 2 ошибка проверки появляется в первом обязательном поле на странице 2 мгновенно. Есть идеи?

ekstasis16 09 дек. 2013, в 06:04

Источник

0

Да, все в одной форме. Но разве проверка не должна вызываться только при отправке формы? Я еще не отправил форму.
ekstasis16 09 дек. 2013, в 05:08

Теги:

javascript

jquery

html5

validation

forms

2 ответа

Ещё вопросы

Да, все в одной форме. Но разве проверка не должна вызываться только при отправке формы? Я еще не отправил форму.

metamarket · Answer 1 · 2019-01-31T16-05-00.000Z

Возникла та же проблема, ошибки проверки вызываются вашим тегом для следующего раздела. Если вы измените его или ошибки исчезли!

kushal jain · Answer 2 · 2013-12-09T03-58-00.000Z

Положите функцию checkValidity на все входные теги. Я сделал это недавно.

                function nextDiv(){
                var a = document.getElementById('ONE').checkValidity();
                var b = document.getElementById('TWO').checkValidity();
                var c = document.getElementById('THREE').checkValidity();
                var d = document.getElementById('FOUR').checkValidity();
                var e = document.getElementById('FIVE').checkValidity();
                var f = document.getElementById('SIX').checkValidity();
                var g = document.getElementById('SIX').value;
                er = document.getElementById("ERROR");
                var email = document.getElementById('ONE').value;
                var ec = checkEmail(email);
                var cp = checkPassword();
                if(a == 1 && b == 1 && c == 1 && d == 1 && e == 1 && f == 1 && g!=0 && ec == 'true' && cp ==1){
                    $("#div_1").slideLeftHide();
                    $("#div_2").delay(1100).slideRightShow();
                    er.style.visibility = "hidden";
                }else{
                    er.style.visibility = "visible";
                }
            }

Это приведет к возврату логического значения и проверке с помощью javascript, если else. Он не будет показывать всплывающее окно проверки, но если вы поместите требуемый тег и шаблон. чем пользователь увидит ошибки

Это всего лишь пример. Следуй за этим.