Запускать стандартную проверку HTML5 (форму) без кнопки отправки? - программирование
Подтвердить что ты не робот

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

Сначала используйте этот фрагмент кода. $(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;
    }
});

Он сосредоточится на первом недопустимом вводе.

Ответ 3

Вы можете использовать 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).

Ответ 4

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

<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>

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

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

Ответ 5

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

Обратите внимание: в формах, которые вы не хотите применять стили CSS 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, поскольку это потрясающе, и ему нужно выйти!

Шеннона

Ответ 6

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

Ответ 7

Как указано в других ответах, используйте 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();
        }
    });

Ответ 8

i использовал

objectName.addEventListener('click', function() {
event.preventDefault();
}

но его ошибка show " - undefined", поэтому в этом случае используйте параметр события, например

objectName.addEventListener('click', function(event) {
event.preventDefault();
}

теперь его работы прекрасны

Ответ 9

Я знаю, что это старая тема, но когда есть очень сложный (особенно асинхронный) процесс проверки, существует простой способ:

<form id="form1">
<input type="button" onclick="javascript:submitIfVeryComplexValidationIsOk()" />
<input type="submit" id="form1_submit_hidden" style="display:none" />
</form>
...
<script>
function submitIfVeryComplexValidationIsOk() {
    var form1 = document.forms['form1']
    if (!form1.checkValidity()) {
        $("#form1_submit_hidden").click()
        return
    }

    if (checkForVeryComplexValidation() === 'Ok') {
         form1.submit()
    } else {
         alert('form is invalid')
    }
}
</script>

Ответ 10

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

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

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

Ответ 11

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