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

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?

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.

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 :-)

    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

poniższy kod działa dla mnie,

$("#btn").click(function () {

    if ($("#frm")[0].checkValidity())
        alert('sucess');
    else
        //Validate Form
        $("#frm")[0].reportValidity()

});

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.

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.

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

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

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

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.

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ę.

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
}

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

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

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

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>

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

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

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ś.

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...
}

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>

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