Jak wymusić sprawdzanie poprawności formularza HTML5 bez przesyłania go przez jQuery


286

Mam ten formularz w mojej aplikacji i prześlę go za pośrednictwem AJAX, ale chcę używać HTML5 do weryfikacji po stronie klienta. Chcę więc móc wymusić sprawdzanie poprawności formularza, być może za pomocą jQuery.

Chcę uruchomić sprawdzanie poprawności bez przesyłania formularza. Czy to możliwe?


Czy możesz określić, w którym momencie chcesz zweryfikować formularz? Co uruchamia walidację? Czy chcesz zweryfikować każde pole, gdy użytkownik wpisuje, wprowadza / opuszcza pole, zmienia wartość?
Peter Pajchl,

6
Chciałbym mieć możliwość zrobienia czegoś takiego: $ ("# my_form"). TriggerHtml5Validation ()
razenha

Ta strona może pomóc w łączeniu
Dan Bray,

Możesz to osiągnąć bez jQuery. Zobacz moje rozwiązanie.
Dan Bray,

Odpowiedzi:


444

Aby sprawdzić, czy pewne pole jest poprawne, użyj:

$('#myField')[0].checkValidity(); // returns true/false

Aby sprawdzić, czy formularz jest prawidłowy, użyj:

$('#myForm')[0].checkValidity(); // returns true/false

Jeśli chcesz wyświetlić natywne komunikaty o błędach, które mają niektóre przeglądarki (np. Chrome), niestety jedynym sposobem na to jest przesłanie formularza, takiego jak to:

var $myForm = $('#myForm');

if(! $myForm[0].checkValidity()) {
  // If the form is invalid, submit it. The form won't actually submit;
  // this will just cause the browser to display the native HTML5 error messages.
  $myForm.find(':submit').click();
}

Mam nadzieję że to pomoże. Pamiętaj, że sprawdzanie poprawności HTML5 nie jest obsługiwane we wszystkich przeglądarkach.


1
Wypróbowałem twoje rozwiązanie, ale nadal wysyła formularz, gdy linia $ myForm.submit () jest wykonywana.
Yashpal Singla

27
Spróbuj wymienić $myForm.submit()z$myForm.find(':submit').click()
Abrahama

8
Abraham ma rację. Musisz faktycznie kliknąć przycisk przesyłania (programowo). Wywołanie $ myForm.submit () nie wyzwoli sprawdzania poprawności.
Kevin Tighe

75
Jeśli twój formularz nie ma przycisku $('<input type="submit">').hide().appendTo($myForm).click().remove();
wysyłania

15
Ta odpowiedź jest bardzo przydatna ze względu na wskazówkę checkValidity(), ale zawiera także niebezpieczny błąd. checkValidity()wywołuje natywne komunikaty o błędach przeglądarki, a nie kliknięcie przycisku Prześlij. Jeśli masz detektor zdarzeń, który nasłuchuje po kliknięciu przycisku wysyłania, uruchomisz go, gdy wykonasz `$ myForm.find (': Submit'). Click ()`, który uruchomi się i spowoduje nieskończoną rekurencję.
Złe żądanie

30

Znalazłem to rozwiązanie, które działa dla mnie. Wystarczy wywołać funkcję javascript w następujący sposób:

action="javascript:myFunction();"

Następnie masz sprawdzanie poprawności HTML5 ... naprawdę proste :-)


3
To również działało dla mnie i myślę, że to najlepsza odpowiedź. Ustawić action="javascript:0"na <form>związał clickimprezy na <button>celu MyFunction()i wszystko działało świetnie. Trzymam cały JS z dala od HTML. MyFunctionmoże następnie przetestować, form.checkValidity()aby kontynuować.
orad

3
Przykładowy kod jest zawsze pomocny.
BJ Patel,

10
Powiązanie z formularzem onsubmit()jest prawie zawsze lepsze niż wiązanie z przyciskiem onclick(), ponieważ istnieją inne sposoby przesłania formularza. (Zwłaszcza przez naciśnięcie returnklawisza.)
alt

+1 To jest niesamowite. nie ma już sprawdzania poprawności metody javascript, jeśli pole jest puste lub jeśli jest to wiadomość e-mail. Przeglądarka może to dla nas zrobić! Czy ta przeglądarka jest kompatybilna?
Jo E.

2
Ani nie działa, action="javascript:myFunction();"ani nie action="javascript:0"działa w najnowszym Firefoksie (67). Działa w Chrome.
Bobz

23
    if $("form")[0].checkValidity()
      $.ajax(
        url: "url"
        type: "post"
        data: {

        }
        dataType: "json"
        success: (data) ->

      )
    else
      #important
      $("form")[0].reportValidity()

from: sprawdzanie poprawności formularza html5


4
reportValidityjest obsługiwany tylko przez Chrome 40.0
MM

To jest CoffeeScript.
amfetamachina

1
reportValidity jest teraz obsługiwany przez Firefox od wersji 49
Justin

Lubię tę część $("form")[0].reportValidity(). Potrzebuję tego na wypadek, gdyby sprawdzenie poprawności zakończyło się niepowodzeniem.
fsevenm

Wspaniały! Dziękuję Ci!
stefo91


16

Oto bardziej ogólny sposób, który jest nieco czystszy:

Utwórz formularz w ten sposób (może to być fikcyjny formularz, który nic nie robi):

<form class="validateDontSubmit">
...

Powiąż wszystkie formularze, których tak naprawdę nie chcesz przesyłać:

$(document).on('submit','.validateDontSubmit',function (e) {
    //prevent the form from doing a submit
    e.preventDefault();
    return false;
})

Powiedzmy teraz, że masz <a>(w obrębie <form>), który po kliknięciu chcesz zweryfikować formularz:

$('#myLink').click(function(e){
  //Leverage the HTML5 validation w/ ajax. Have to submit to get em. Wont actually submit cuz form
  //has .validateDontSubmit class
  var $theForm = $(this).closest('form');
  //Some browsers don't implement checkValidity
  if (( typeof($theForm[0].checkValidity) == "function" ) && !$theForm[0].checkValidity()) {
     return;
  }

  //if you've gotten here - play on playa'
});

Kilka uwag tutaj:

  • Zauważyłem, że tak naprawdę nie trzeba przesyłać formularza, aby nastąpiło sprawdzenie poprawności - checkValidity()wystarczy wywołanie do (przynajmniej w chrome). Jeśli inni mogą dodawać komentarze do testowania tej teorii w innych przeglądarkach, zaktualizuję tę odpowiedź.
  • To, co uruchamia sprawdzanie poprawności, nie musi znajdować się w <form>. To był po prostu czysty i elastyczny sposób na rozwiązanie ogólnego zastosowania.

12

Może się spóźnić na imprezę, ale jakoś znalazłem to pytanie, próbując rozwiązać podobny problem. Ponieważ żaden kod z tej strony nie działał dla mnie, tymczasem wpadłem na rozwiązanie, które działa zgodnie ze specyfikacją.

Problem polega na tym, że twój <form>DOM zawiera pojedynczy <button>element, po uruchomieniu, który <button>automatycznie zasygnalizuje formularz. Jeśli grasz z AJAX, prawdopodobnie musisz zapobiec domyślnej akcji. Ale jest pewien haczyk: jeśli to zrobisz, zapobiegniesz również podstawowej weryfikacji HTML5. Dlatego dobrym pomysłem jest uniknięcie domyślnych ustawień tego przycisku tylko wtedy, gdy formularz jest prawidłowy. W przeciwnym razie walidacja HTML5 ochroni Cię przed przesłaniem. jQuery checkValidity()pomoże w tym:

jQuery:

$(document).ready(function() {
  $('#buttonID').on('click', function(event) {
    var isvalidate = $("#formID")[0].checkValidity();
    if (isvalidate) {
      event.preventDefault();
      // HERE YOU CAN PUT YOUR AJAX CALL
    }
  });
});

Kod opisany powyżej pozwoli Ci korzystać z podstawowej weryfikacji HTML5 (z dopasowaniem typu i wzorca) BEZ formularza przesyłania.


6

Mówisz o dwóch różnych rzeczach: „sprawdzanie poprawności HTML5” i sprawdzanie poprawności formularza HTML za pomocą javascript / jquery.

HTML5 „ma” wbudowane opcje sprawdzania poprawności formularza. Na przykład użycie atrybutu „wymagane” w polu, które może (w oparciu o implementację przeglądarki) zakończyć się niepowodzeniem przesłania formularza bez użycia javascript / jquery.

Z javascrip / jquery możesz zrobić coś takiego

$('your_form_id').bind('submit', function() {
   // validate your form here
   return (valid) ? true : false;
});

2
Chcę uruchomić sprawdzanie poprawności bez przesyłania formularza.
razenha

Zgodnie z twoją aktualizacją - nadal uważam, że to poprawne rozwiązanie. Nie określono, jak chcesz uruchomić triggerHtml5Validation()funkcję. Powyższy kod dołącza do formularza przesłanie zdarzenia; po przesłaniu przechwytujesz wydarzenie i zatwierdzasz formularz. Jeśli nigdy nie będziesz chciał przesłać formularza, po prostu return false;i przesłanie nigdy nie nastąpi.
Peter Pajchl,

7
return (valid) ? true : false=== return valid. :)
Davi Koscianski Vidal

1
Ups, ja + 1'ed @davi, ponieważ początkowo myślałem o tym samym. Ale tak naprawdę to nie to samo, ponieważ po prostu return validnie zwraca false dla wartości null / undefined. Ale to tak naprawdę nie ma znaczenia, odpowiedź brzmiała pseudokod, chodzi o to: użyj return false, aby nie przesłać formularza ^^
T_D

5
var $myForm = $('#myForm ');
if (!$myForm[0].checkValidity()) {
  $('<input type="submit">').hide().appendTo($myForm).click().remove();
}

nie działa na chromie 74. Czy mogę rzucić na nią światło?
codexplorer

3

Aby sprawdzić wszystkie wymagane pola formularza bez użycia przycisku Prześlij, możesz użyć funkcji poniżej.

Musisz przypisać wymagany atrybut do kontrolek.

  $("#btnSave").click(function () {
    $(":input[required]").each(function () {                     
        var myForm = $('#form1');
        if (!$myForm[0].checkValidity()) 
          {                
            $(myForm).submit();              
          }
        });
  });

3

Nie potrzebujesz jQuery, aby to osiągnąć. W formularzu dodaj:

onsubmit="return buttonSubmit(this)

lub w JavaScript:

myform.setAttribute("onsubmit", "return buttonSubmit(this)");

W swojej buttonSubmitfunkcji (lub jakkolwiek ją nazwiesz) możesz przesłać formularz za pomocą AJAX. buttonSubmitzostanie wywołany tylko wtedy, gdy Twój formularz zostanie zweryfikowany w HTML5.

Jeśli komuś to pomoże, oto moja buttonSubmitfunkcja:

function buttonSubmit(e)
{
    var ajax;
    var formData = new FormData();
    for (i = 0; i < e.elements.length; i++)
    {
        if (e.elements[i].type == "submit")
        {
            if (submitvalue == e.elements[i].value)
            {
                submit = e.elements[i];
                submit.disabled = true;
            }
        }
        else if (e.elements[i].type == "radio")
        {
            if (e.elements[i].checked)
                formData.append(e.elements[i].name, e.elements[i].value);
        }
        else
            formData.append(e.elements[i].name, e.elements[i].value);
    }
    formData.append("javascript", "javascript");
    var action = e.action;
    status = action.split('/').reverse()[0] + "-status";
    ajax = new XMLHttpRequest();
    ajax.addEventListener("load", manageLoad, false);
    ajax.addEventListener("error", manageError, false);
    ajax.open("POST", action);
    ajax.send(formData);
    return false;
}

Niektóre z moich formularzy zawierają wiele przycisków przesyłania, stąd ten wiersz if (submitvalue == e.elements[i].value). Ustawiam wartość submitvalueza pomocą zdarzenia kliknięcia.


2

Miałem dość złożoną sytuację, w której potrzebowałem wielu przycisków przesyłania, aby przetwarzać różne rzeczy. Na przykład Zapisz i Usuń.

Podstawą było to, że był również dyskretny, więc nie mogłem po prostu zrobić z niego normalnego przycisku. Ale chciałem również wykorzystać sprawdzanie poprawności HTML5.

Zdarzenie przesłać również zostało zastąpione w przypadku, gdy użytkownik nacisnął klawisz Enter, aby uruchomić oczekiwane domyślne przesyłanie; w tym przykładzie zapisz.

Oto wysiłki przetwarzania formularza, aby nadal działać z / bez javascript i ze sprawdzaniem poprawności HTML5, zarówno ze zdarzeniami przesyłania, jak i klikania.

jsFiddle Demo - sprawdzanie poprawności HTML5 z przesłonięciem przesłania i kliknięcia

xHTML

<form>
    <input type="text" required="required" value="" placeholder="test" />
    <button type="submit" name="save">Save</button>
    <button type="submit" name="delete">Delete</button>
</form>

JavaScript

//wrap our script in an annonymous function so that it can not be affected by other scripts and does not interact with other scripts
//ensures jQuery is the only thing declared as $
(function($){
    var isValid = null;
    var form = $('form');
    var submitButton = form.find('button[type="submit"]')
    var saveButton = submitButton.filter('[name="save"]');
    var deleteButton = submitButton.filter('[name="delete"]');

    //submit form behavior
    var submitForm = function(e){
        console.log('form submit');
        //prevent form from submitting valid or invalid
        e.preventDefault();
        //user clicked and the form was not valid
        if(isValid === false){
            isValid = null;
            return false;
        }
        //user pressed enter, process as if they clicked save instead
        saveButton.trigger('click');
    };

    //override submit button behavior
    var submitClick = function(e){
        //Test form validitiy (HTML5) and store it in a global variable so both functions can use it
        isValid = form[0].checkValidity();
        if(false === isValid){
            //allow the browser's default submit event behavior 
            return true;
        }
        //prevent default behavior
        e.preventDefault();
        //additional processing - $.ajax() etc
        //.........
        alert('Success');
    };

    //override submit form event
    form.submit(submitForm);

    //override submit button click event
    submitButton.click(submitClick);
})(jQuery);

Zastrzeżenie dotyczące używania Javascript polega na tym, że domyślne kliknięcie przeglądarki musi zostać przeniesione do zdarzenia wysyłania MUSI się zdarzyć, aby wyświetlić komunikaty o błędach bez obsługi każdej przeglądarki w kodzie. W przeciwnym razie, jeśli zdarzenie kliknięcia zostanie zastąpione przez event.preventDefault () lub zwróci false, nigdy nie zostanie ono przeniesione do zdarzenia przesłania przeglądarki.

Należy zwrócić uwagę na to, że w niektórych przeglądarkach nie uruchamia formularza wysyłania, gdy użytkownik naciśnie klawisz Enter, zamiast tego uruchamia pierwszy przycisk przesyłania w formularzu. Dlatego istnieje plik console.log („formularz przesłania”), który pokazuje, że nie uruchamia się.


Jesteśmy w pełni świadomi, że można tego dokonać bez jQuery, ale OP napisał tytuł tego tematu: „Jak wymusić sprawdzanie poprawności formularza HTML5 bez przesyłania go przez jQuery”, wyraźnie sugerując, że należy użyć jQuery.
vzr

@vzr Moja odpowiedź używa jQueryjawnie. Różni się tym, że obsługuje przetwarzanie sprawdzania poprawności HTML5 za pomocą wielu przycisków przesyłania i zapobiega przesyłaniu formularza AJAX, gdy jest nieprawidłowy. Domyślne savedziałanie, gdy użytkownik naciśnie enterklawisz na klawiaturze. Która w momencie mojego publikowania żadna z podanych odpowiedzi nie była rozwiązaniem ani dla wielu przycisków przesyłania, ani dla przechwycenia klawisza enter, aby zapobiec przesłaniu ajax.
fyrye

2

Możesz to zrobić bez przesyłania formularza.

Na przykład, jeśli przycisk Prześlij formularz o identyfikatorze „szukaj” ma inną formę. Możesz wywołać zdarzenie kliknięcia na tym przycisku przesyłania, a następnie wywołać ev.preventDefault. W moim przypadku potwierdzam formularz B ze złożonego formularza A. Lubię to

function validateFormB(ev){ // DOM Event object
  //search is in Form A
  $("#search").click();
  ev.preventDefault();
  //Form B validation from here on
}

2

Ten sposób działa dla mnie dobrze:

  1. Dodaj onSubmitatrybut do swojego form, nie zapomnij dołączyć returndo wartości.

    <form id='frm-contact' method='POST' action='' onSubmit="return contact()">
  2. Zdefiniuj funkcję.

    function contact(params) {
        $.ajax({
            url: 'sendmail.php',
            type: "POST",
            dataType: "json",
            timeout: 5000,
            data: { params:params },
            success: function (data, textStatus, jqXHR) {
                // callback
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(jqXHR.responseText);
            }
        });
    
        return false;
    }

1
$("#form").submit(function() { $("#saveButton").attr("disabled", true); });

nie najlepsza odpowiedź, ale dla mnie działa.


1

Wiem, że już na nie odpowiedziano, ale mam inne możliwe rozwiązanie.

Jeśli używasz jquery, możesz to zrobić.

Najpierw utwórz kilka rozszerzeń jquery, aby móc ich użyć w razie potrzeby.

$.extend({
    bypassDefaultSubmit: function (formName, newSubmitMethod) {
        $('#'+formName).submit(function (event) {
            newSubmitMethod();
            event.preventDefault();
        }
    }
});

Następnie zrób coś takiego, gdzie chcesz go użyć.

<script type="text/javascript">
    /*if you want to validate the form on a submit call, 
      and you never want the form to be submitted via
      a normal submit operation, or maybe you want handle it.
    */
    $(function () {
        $.bypassDefaultSubmit('form1', submit);
    });
    function submit(){ 
        //do something, or nothing if you just want the validation
    }

</script>

1
$(document).on("submit", false);

submitButton.click(function(e) {
    if (form.checkValidity()) {
        form.submit();
    }
});

$ (dokument) .on („prześlij”, fałsz); // ten zadziałał idealnie, tego szukałem :)
Akshay Shrivastav

1

To działało ode mnie, aby wyświetlać natywne komunikaty o błędach HTML 5 z weryfikacją formularza.

<button id="btnRegister" class="btn btn-success btn btn-lg" type="submit"> Register </button>



$('#RegForm').on('submit', function () 
{

if (this.checkValidity() == false) 
{

 // if form is not valid show native error messages 

return false;

}
else
{

 // if form is valid , show please wait message and disable the button

 $("#btnRegister").html("<i class='fa fa-spinner fa-spin'></i> Please Wait...");

 $(this).find(':submit').attr('disabled', 'disabled');

}


});

Uwaga: RegForm to form id.

Odniesienie

Nadzieja pomaga komuś.


musisz dodać wydarzenie, aby włączyć wyłączony przycisk
wysyłania

1

Jest to dość prosty sposób na sprawdzenie poprawności HTML5 dla dowolnej formy, przy jednoczesnym zachowaniu nowoczesnej kontroli JS nad formularzem. Jedynym zastrzeżeniem jest to, że przycisk wysyłania musi znajdować się wewnątrz <form>.

HTML

<form id="newUserForm" name="create">
Email<input type="email" name="username" id="username" size="25" required>
Phone<input type="tel" id="phone" name="phone" pattern="(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}" size="12" maxlength="12" required>
<input id="submit" type="submit" value="Create Account" >
</form>

js

// bind in ready() function
jQuery( "#submit" ).click( newAcctSubmit );

function newAcctSubmit()
{
  var myForm = jQuery( "#newUserForm" );

  // html 5 is doing the form validation for us,
  // so no need here (but backend will need to still for security)
  if ( ! myForm[0].checkValidity() )
  {
    // bonk! failed to validate, so return true which lets the
    // browser show native validation messages to the user
    return true;
  }

  // post form with jQuery or whatever you want to do with a valid form!
  var formVars = myForm.serialize();
  etc...
}

0

Myślę, że najlepsze podejście

będzie korzystać z wtyczki jQuery Validation, która wykorzystuje sprawdzone metody sprawdzania poprawności formularzy, a także ma dobrą obsługę przeglądarki. Nie musisz się więc martwić problemami ze zgodnością przeglądarki.

I możemy użyć funkcji sprawdzania poprawności jQuery valid (), która sprawdza, czy wybrany formularz jest prawidłowy lub czy wszystkie wybrane elementy są prawidłowe bez przesłania formularza.

<form id="myform">
   <input type="text" name="name" required>
   <br>
   <button type="button">Validate!</button>
</form>
<script>
  var form = $( "#myform" );
  form.validate();
  $( "button" ).click(function() {
    console.log( "Valid: " + form.valid() );
  });
</script>

0

Zgodnie z pytaniem html5 ważność powinna być sprawdzana za pomocą jQuery na początku i w większości odpowiedzi tak się nie dzieje, a powodem tego jest:

podczas sprawdzania poprawności za pomocą domyślnej funkcji formularza HTML5

checkValidity();// returns true/false

musimy zrozumieć, że jQuery zwraca tablicę obiektów, wybierając to w ten sposób

$("#myForm")

dlatego musisz określić pierwszy indeks, aby funkcja checkValidity () działała

$('#myForm')[0].checkValidity()

oto kompletne rozwiązanie:

<button type="button" name="button" onclick="saveData()">Save</button>

function saveData()
{
    if($('#myForm')[0].checkValidity()){
        $.ajax({
          type: "POST",
          url: "save.php",
          data: data,
          success: function(resp){console.log("Response: "+resp);}
        });
    }
}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.