Bootstrap form input: prevent submission but allow input validation

Question

I have the following problem: I use the bootstrap form to enter data from users, and I use jQuery preventDefault () to disable the submit button from submitting the form (I use AJAX instead). However, this feature also prevents bootstrap input validation. For example, if someone enters an email without the "@" in

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

bootstrap, after clicking the "Submit" button, checks this entry and returns an error pop-up.

My question is: how to prevent sending a request while maintaining the bootstrap form validation mechanism?

What I tried: using preventDefault () and writing my own script check, however this is similar to how to reinvent the wheel and have extra code when it is not needed.

Thanks!

Answer 1

I believe that you are talking about your own validation of the HTML5 form and do not verify it by self-tuning, I have never encountered a bootstrap check before. (maybe I'm wrong).

Most new browsers will check <input type='email'/> as an email address and <input type='text' required='required'/> as required when submitting the form.

If, for example, you use e.preventDefault(); in the event of clicking on the submit button, the form will not try to submit, and therefore, the built-in verification will never happen.

If you want to keep validation you need to use e.preventDefault(); in the form submission event, not the button click event.

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 }); 

Anyway, hope this helps. If I misunderstood something, let me know, and I try to help further.

Answer 2

I had the same problem, I came to use "stopPropagation" as a way to stop form submission. But after a little reading in jQuery 3, I realized that "preventDefault" was enough for what I wanted.

This caused the form to check and the submit event did not continue.

(This example is an attempt that I made myself).

 $('form').on("submit",function( event ) { if ( $('#id_inputBox_username').val().length == 0 && $('#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'); } }); 

Answer 3

I had the same problem and I found this solution:

 $('#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(); } })