Запустить стандартную проверку HTML5 (форму) без использования кнопки «Отправить»? - PullRequest
Новая
       2

Запустить стандартную проверку HTML5 (форму) без использования кнопки «Отправить»?

67 голосов
/ 10 августа 2011

Кто-нибудь, кто знает, как я могу запустить стандартную проверку HTML5 в форме, не используя кнопку отправки?(JavaScript или jQuery).

Я делаю , а не хочу отправить POST/GET запрос, только выполнить проверку.

Ответы [ 12 ]

29 голосов
/ 17 июля 2013

После некоторого исследования я придумал следующий код, который должен быть ответом на ваш вопрос. (По крайней мере у меня это сработало)

Сначала используйте этот кусок кода. $(document).ready обеспечивает выполнение кода при загрузке формы в DOM: 

$(document).ready(function()
{
    $('#theIdOfMyForm').submit(function(event){
        if(!this.checkValidity())
        {
            event.preventDefault();
        }
    });
});

Тогда просто наберите $('#theIdOfMyForm').submit(); в своем коде.

UPDATE

Если вы действительно хотите показать, в каком поле пользователь неправильно указал форму, добавьте следующий код после event.preventDefault();

$('#theIdOfMyForm :input:visible[required="required"]').each(function()
{
    if(!this.validity.valid)
    {
        $(this).focus();
        // break
        return false;
    }
});

Это даст фокус на первый неверный ввод.

21 голосов
/ 10 августа 2011

Принятый ответ на этот вопрос , кажется, то, что вы ищете.

Краткое резюме: в обработчике события для отправки вызовите event.preventDefault().

15 голосов
/ 05 сентября 2017

Вы можете использовать reportValidity , однако он пока не поддерживает браузер. Он работает в Chrome, Opera и Firefox, но не в IE, не в Edge и не в Safari: 

var myform = $("#my-form")[0];
if (!myform.checkValidity()) {
    if (myform.reportValidity) {
        myform.reportValidity();
    } else {
        //warn IE users somehow
    }
}

( checkValidity имеет лучшую поддержку, но не работает и в IE <10.) </p>

11 голосов
/ 29 сентября 2012

Вы должны отправить форму, чтобы заставить работать проверку html5. Есть способ обойти это, чтобы получить то, что вы хотите. Се код: 

<body>
    <h1>Validation Example</h1><br />
    <h2>Insert just 1 digit<h2>
    <form id="form" onsubmit="return false">
        <label>Input<input type="text" pattern="[0-9]" id="input" /></label> 
        <input type="submit" class="hide" id="inputButton">         
    </form>
</body>

См. Пример здесь

Примечание: использование form.submit () не работает для меня. Поэтому я создал скрытую кнопку отправки, которая срабатывает при включении. Не спрашивай меня почему. Может быть, кто-то мог бы уточнить это.

2 голосов
/ 14 мая 2013

Короткий ответ, нет, нет способа «вызвать» функциональность по умолчанию встроенного пузырька html5 перед отправкой формы, вы можете checkValidity() на некоторых входах, но опять-таки не работает так, как вы хотели бы.Если не считать предотвращения по умолчанию, если вы все еще хотите отправить форму после завершения проверки, вы все равно можете обработать этот стиль, выполнив следующие действия:

Обратите внимание, что в формах вы не хотите, чтобы стили CSS проверки былиПосле применения вы можете просто добавить атрибут novalidate к форме.

HTML: 

<form name="login" id="loginForm" method="POST">
    <input type="email" name="username" placeholder="Email">
    <input type="password" name="password" placeholder="Password">
    <input type="submit" value="LOG IN" class="hero left clearBoth">
</form>

Если вы не используете SCSS, я настоятельно рекомендуюГлядя на это, он намного более управляем, прост в написании и менее запутан.Примечание: в примере с скриптом у меня есть точная CSS, которая будет скомпилирована.Я также включил пример стиля пузыря.

SCSS: 

form:not([novalidate])            {
  input, textarea                 {
    &:required                    {background: transparent url('/../../images/icons/red_asterisk.png') no-repeat 98% center;}
    &:required:valid              {background: transparent url('/../../images/icons/valid.png') no-repeat 98% center; @include box-shadow(0 0 5px #5cd053);border-color: #28921f;}
    &:not(:focus):valid           {box-shadow: none;border: 1px solid $g4;}
    &:focus:invalid               {background: transparent url('/../../images/icons/invalid.png') no-repeat 98% center;  @include box-shadow(0 0 5px #d45252); border-color: #b03535}  
  }
}
span.formHintBubble {position:absolute; background:$g7; margin-top:50px;@include borderRadius(10px); padding:5px 40px 5px 10px; color:white; @include opacity(0.9); @include box-shadow(1px 1px 6px 1px rgba(0,0,0,0.2));
  &:after {
     @include triangle(30px, $g7, up); content: " "; margin-bottom:27px; left:25px;
  }
  .cross {background:black; border:1px solid $g3; @include borderRadius(10px); width:15px; height:15px; color:#fff; display:block; line-height:15px; position:absolute; right:5px; top:50%; margin-top:-7.5px; padding:0; text-align:center; font-size:10px; cursor:pointer;}
}

JAVASCRIPT:

Здесь мыможет сделать что-то напуганное, чтобы использовать сообщения по умолчанию и наследовать их внутри собственного «пузыря» или окна сообщения об ошибке. 

var form    = $('form');
var item    = form.find(':invalid').first();
var node    = item.get(0);                       
var pos     = item.position();                
var message = node.validationMessage || 'Invalid value.'; 
var bubble  = $('<span/>').html('<span class="formHintBubble" style="left: ' + pos.left  + 'px; top:' + pos.top + 'px;">' + message + '<div class="cross">X</div></span>').contents();        
bubble.insertAfter(item);

DEMO:

http://jsfiddle.net/shannonhochkins/wJkVS/

Наслаждайтесь, и я надеюсь, что помогу другим с проверкой формы HTML5, так как это здорово, и это нужно сделать!

Шеннон

1 голос
/ 28 мая 2019

Это моя реализация решения, предложенного @mhm, где я отказался от использования jQuery.

Переменная formId содержит идентификатор формы, а msg - это объект с сообщениями моего приложения.

Эта реализация пытается уведомить пользователя с помощью собственных сообщений об ошибках HTML 5, если это невозможно, затем предупредить сообщение об ошибке общей формы.

Если ошибок нет, я отправляю форму.

let applyForm = document.getElementById(formId);

if (!applyForm.checkValidity()) {
  if (applyForm.reportValidity) {
    applyForm.reportValidity();
  } else {
    alert(msg.ieErrorForm);
  }
} else {
  applyForm.submit();
}
1 голос
/ 05 июня 2017

Я думаю, что это проще: 

$('submit').click(function(e){
if (e.isValid())
   e.preventDefault();
//your code.
}

это остановит отправку, пока форма не станет действительной.

1 голос
/ 16 июня 2014

Как указано в других ответах, используйте event.preventDefault () для предотвращения отправки формы.

Чтобы проверить форму перед тем, как написать небольшую функцию jQuery, которую вы можете использовать (обратите внимание, что элементу нужен идентификатор!) 

(function( $ ){
    $.fn.isValid = function() {
        return document.getElementById(this[0].id).checkValidity();
    };
})( jQuery );

пример использования 

 $('#submitBtn').click( function(e){

        if ($('#registerForm').isValid()){
            // do the request
        } else {
            e.preventDefault();
        }
    });
1 голос
/ 28 января 2013

form.submit () не работает, потому что проверка HTML5 выполняется перед отправкой формы.Когда вы нажимаете кнопку отправки, проверка HTML5 запускается, а затем форма отправляется, если проверка прошла успешно.

0 голосов
/ 22 мая 2019

Попробуйте HTMLFormElement.reportValidity (), где эта функция будет вызывать проверки ввода.

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...