Wprowadzanie formularza Bootstrap: uniemożliwia przesyłanie, ale pozwala na sprawdzanie danych wejściowych

Question

Mam następujący problem: Używam formularza ładowania do pobierania danych od użytkowników, a ja używam jQuery preventDefault(), aby wyłączyć przycisk wysyłania z wysyłania formularza (Używam zamiast tego AJAX). Jednak ta funkcja zapobiega także sprawdzaniu danych wejściowych przez bootstrap. Na przykład, jeśli ktoś wejdzie e-mail bez „@” w

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

bootstrap będzie, po kliknięciu złożyć, sprawdzić, czy wejście i powrót okienko z błędem.

Moje pytanie brzmi: jak zapobiec wysyłaniu żądania przy zachowaniu nienaruszonego mechanizmu sprawdzania formularza startowego?

Co próbowałem: using preventDefault() i napisanie własnego skryptu sprawdzającego, jednak wydaje się, że jest to wymyślanie koła i posiadanie dodatkowego kodu, gdy nie jest potrzebny.

Dziękujemy!

Answer 1

Wydaje mi się, że mówisz o natywnym sprawdzaniu poprawności formularza HTML5, a nie o sprawdzaniu oryginalności przez bootstrap, nigdy wcześniej nie spotkałem się z walidacją bootstrap. (Mogę jednak być w błędzie).

Większość nowych przeglądarek potwierdzi jako <input type='email'/> jako adres e-mail i <input type='text' required='required'/> wymagane podczas przesyłania formularzy.

Jeśli na przykład używasz przycisku e.preventDefault(); w zdarzeniu kliknięcia przycisku przesyłania, formularz nigdy nie będzie próbował przesłać, dlatego natywna weryfikacja nigdy nie nastąpi.

Jeśli chcesz zachować walidację, musisz użyć e.preventDefault(); w zdarzeniu przesyłania formularza, a nie zdarzenia kliknięcia na przycisku.

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

każdym razie nadzieję, że to pomaga. Jeśli w jakiś sposób źle zrozumiałem, daj mi znać i chory staram się dalej pomagać.

Answer 2

miałem ten sam problem i uważam to rozwiązanie:

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

Answer 3

miałem ten sam problem, doszedłem do korzystania z "stopPropagation" jako sposób na powstrzymanie złożenie formularza. Ale po krótkim lekturze jQuery 3 zdałem sobie sprawę, że "preventDefault" wystarczało temu, czego chciałem.

Doprowadziło to do sprawdzenia poprawności formularza i nie przesłano zgłoszenia.

(Ten przykład jest próba, którą miałem na własną rękę).

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