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

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



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

682   10  

10 ответов:

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

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

20  
2017-05-23 15:17:46

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

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

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

позвони $('#theIdOfMyForm').submit(); в коде.

обновление

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

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

это даст фокус на первый недопустимый вход.

27  
2013-07-31 13:44:15

можно использовать 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

11  
2017-09-05 16:59:53

вы должны отправить форму, чтобы получить проверку 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 () не работает для меня. Поэтому я создал скрытую кнопку отправки, которая срабатывает на keyup. Не спрашивай меня почему. Может быть, кто-то мог бы прояснить это.

9  
2012-09-29 00:10:42

короткий ответ, Нет, нет никакого способа "вызвать" функциональность по умолчанию HTML5 bubble inline перед отправкой формы, вы можете 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, я настоятельно рекомендую изучить его, он гораздо более управляемый, простой в написании и менее запутанный. Примечание: в Примере fiddle у меня есть точный 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);

демо:

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

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

Шеннон

2  
2013-05-14 04:04:13

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

1  
2013-01-28 18:29:59

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

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

(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();
        }
    });
0  
2014-06-16 13:35:20

Я был с помощью 

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

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

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

теперь его работает отлично

0  
2016-03-01 14:56:18

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

<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>
0  
2017-01-11 00:49:26

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

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

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

0  
2017-06-05 18:09:48

Comments

    Ничего не найдено.
Click here to cancel reply.