CODEWITHSUNDEEP
javascriptjqueryhtmlformstwitter-bootstrap
Aroll605
Aroll605

Reputation: 386

Bootstrap form input: prevent submit, but allow for input checking

I've got the following problem: I use bootstrap form to take input from users, and I use jQuery preventDefault() to disable the submit button from sending the form (I use AJAX instead). However, that function also prevents input checking that is done by bootstrap. For example, if someone enters an e-mail without '@' into

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

bootstrap would, upon clicking submit, check that input and return a popup with an error.

My question is: how to prevent the request being sent while keeping the bootstrap form checking mechanism intact?

What I have tried: using preventDefault() and writing my own checking script, however this seems like reinventing the wheel and having extra code when it's not needed.

Thank you!

Upvotes: 12

Views: 25104

Answers (3)

Ronald Valera Santana
Ronald Valera Santana

Reputation: 31

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

This caused the form validation to happen and the submit event didn't proceed.

(This example is of an attempt i had on my own).

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

Upvotes: 1

andrems
andrems

Reputation: 1

I had the same problem and I find 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();
  }
})

Upvotes: 0

Ed Fryed
Ed Fryed

Reputation: 2198

I believe you are talking about the native HTML5 form validation and not validation by bootstrap its self, I have never come across bootstrap validation before. (i may be wrong though).

Most new browsers will validate <input type='email'/> as an email address and <input type='text' required='required'/> as required on form submission.

If for example you are using e.preventDefault(); on the click event on the submit button the form will never attempt to submit and hence the native validation will never happen.

If you want to keep the validation you need to use e.preventDefault(); on the submit event of the form not the click event on the button.

The html...

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

The 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 have misunderstood in any way let me know and ill try to assist further.

Upvotes: 20

Related Questions