Блог

У меня следующая проблема: я использую форму начальной загрузки для приема ввода от пользователей, и я использую jQuery preventDefault(), чтобы отключить кнопку отправки от отправки формы (вместо этого я использую AJAX). Однако эта функция также предотвращает проверку ввода, выполняемую bootstrap. Например, если кто-то вводит электронное письмо без «@» в

 <input type="email" class="form-control">
 

после нажатия кнопки отправки bootstrap проверит этот ввод и вернет всплывающее окно с ошибкой.

Мой вопрос: как предотвратить отправку запроса, сохранив механизм проверки формы начальной загрузки без изменений?

Что я пробовал: использование preventDefault() и написание собственного сценария проверки, однако это похоже на изобретение колеса и использование дополнительного кода, когда он не нужен.

Спасибо!

Я полагаю, что вы говорите о проверке собственной формы HTML5, а не о проверке самим bootstrap, я никогда раньше не сталкивался с проверкой начальной загрузки. (хотя, возможно, я ошибаюсь).

Большинство новых браузеров будут проверять <input type='email'/> наличие адреса электронной почты и <input type='text' required='required'/> в соответствии с требованиями при отправке формы.

Если, например, вы используете e.preventDefault(); событие on the click на кнопке отправки, форма никогда не будет пытаться отправить, и, следовательно, собственная проверка никогда не произойдет.

Если вы хотите сохранить проверку, вам нужно использовать e.preventDefault(); событие отправки формы, а не событие нажатия на кнопку.

HTML…

 <form action='' method='post'>
   <input type='email' name='email' required='required' placeholder='email'/>
   <button type='submit'>Submit</button>
</form>
 

jQuery…

 //this will stop the click on the button and will not trigger validation as the submit event will never be triggered
$("button").on('click',function(e){
    e.preventDefault();
    //ajax code here
});

//this will stop the submit of the form but allow the native HTML5 validation (which is what i believe you are after)
$("form").on('submit',function(e){
    e.preventDefault();
    //ajax code here
});
 

В любом случае, надеюсь, это поможет. Если я что-то неправильно понял, дайте мне знать, и я постараюсь помочь в дальнейшем.

У меня была такая же проблема, я решил использовать «stopPropagation» как способ остановить отправку формы. Но после небольшого чтения jQuery 3 я понял, что «preventDefault» было достаточно для того, что я хотел.

Это привело к тому, что произошла проверка формы, и событие отправки не продолжилось.

(Этот пример относится к попытке, которую я предпринял самостоятельно).

 $('form').on("submit",function( event ) {

if ( $('#id_inputBox_username').val().length == 0 amp;amp; 
$('#id_inputBox_password').val().length == 0 ) {
    event.preventDefault();
    $('#id_inputBox_username').tooltip('show');
    $('#id_inputBox_password').tooltip('show');         

} else if ( $('#id_inputBox_username').val().length == 0 ) {
    event.stopPropagation();
    $('#id_inputBox_username').tooltip('show');

} else if ( $('#id_inputBox_password').val().length == 0 ) {
    event.stopPropagation();
    $('#id_inputBox_password').tooltip('show'); 
}
});
 

У меня была такая же проблема, и я нахожу это решение:

 $('#formulario').on('submit', function (e) {
  if (e.isDefaultPrevented()) {
    // handle the invalid form...
  } else {
    // everything looks good!
    e.preventDefault(); //prevent submit
            $(".imprimir").show();
            $(".informacao").fadeOut();
            carregardados();
  }
})