Sprawdzanie poprawności HTML5, gdy typem wejściowym nie jest "prześlij"

Question

Używam HTML5 do sprawdzania poprawności pól. Przesyłam formularz za pomocą JavaScript przy kliknięciu przycisku. Ale sprawdzanie poprawności HTML5 nie działa. Działa tylko wtedy, gdy wtedy typ wejścia to submit. Czy możemy zrobić coś innego niż przy użyciu sprawdzania poprawności JavaScript lub zmianie typu na submit?

Jest to kod HTML:

<input type="text" id="example" name="example" value="" required> 
<button type="button" onclick="submitform()" id="save">Save</button> 

mam wysłaniu formularza w funkcji submitform().

Answer 1

Proces sprawdzania formularza HTML5 jest ograniczony do sytuacji, w których formularz jest przesyłany za pomocą przycisku przesyłania. Form submission algorithm wyraźnie mówi, że sprawdzanie poprawności nie jest wykonywane, gdy formularz jest przesyłany za pomocą metody submit(). Najwyraźniej chodzi o to, że jeśli przesyłasz formularz za pomocą JavaScript, powinieneś dokonać sprawdzenia poprawności.

Można jednak zażądać (statycznego) sprawdzania formularza od ograniczeń zdefiniowanych przez atrybuty HTML5, korzystając z metody checkValidity(). Jeśli chcesz wyświetlać te same komunikaty o błędach, co przeglądarka zrobiłaby w sprawdzaniu poprawności formularza HTML5, obawiam się, że musisz sprawdzić wszystkie pola z ograniczeniami, ponieważ właściwość validityMessage jest własnością pól (formantów), a nie formularza . W przypadku jednego pola ograniczonym, jak w przypadku przedstawionym, to jest trywialne przedmiotu:

function submitform() { 
    var f = document.getElementsByTagName('form')[0]; 
    if(f.checkValidity()) { 
    f.submit(); 
    } else { 
    alert(document.getElementById('example').validationMessage); 
    } 
} 

Answer 2

spróbuj <button type="submit"> można wykonać funkcjonalność submitform() wykonując <form ....... onsubmit="submitform()">

Answer 3

Należy użyć formularza tag załączając swoje wejścia. I wpisz typ przesyłania.
To działa.

<form id="testform"> 
<input type="text" id="example" name="example" required> 
<button type="submit" onclick="submitform()" id="save">Save</button> 
</form> 

Od HTML5 Validation działa tylko z przycisku trzeba złożyć, aby utrzymać go tam. Możesz uniknąć przesyłania formularza, jeśli jest to prawidłowe, zapobiegając domyślnej akcji, pisząc obsługę zdarzeń dla formularza.

document.getElementById('testform').onsubmit= function(e){ 
    e.preventDefault(); 
} 

To spowoduje, że walidacja zostanie uznana za nieważną, a formularz nie zostanie przesłany, gdy będzie ważny.

Answer 4

mogę się spóźnić, ale sposób w jaki to zrobił, było stworzenie ukryte złożyć wejście i nazywając to Obsługa kliknięć po przesłaniu. Coś jak (przy użyciu jQuery dla uproszczenia):

<input type="text" id="example" name="example" value="" required> 
<button type="button" onclick="submitform()" id="save">Save</button> 
<input id="submit_handle" type="submit" style="display: none"> 

<script> 
function submitform() { 
    $('#submit_handle').click(); 
} 
</script> 

Answer 5

Spróbuj tego:

<script type="text/javascript"> 
    function test 
    { 
     alert("hello world"); //write your logic here like ajax 
    } 
</script> 

<form action="javascript:test();" > 
    firstName : <input type="text" name="firstName" id="firstName" required/><br/> 
    lastName : <input type="text" name="lastName" id="lastName" required/><br/> 
    email : <input type="email" name="email" id="email"/><br/> 
    <input type="submit" value="Get It!" name="submit" id="submit"/> 
</form> 

Answer 6

HTML5 walidacji działają tylko gdy typ przycisk będzie złożyć

zmiana -

<button type="button" onclick="submitform()" id="save">Save</button> 

To -

<button type="submit" onclick="submitform()" id="save">Save</button> 

Answer 7

Chciałem dodać nowy sposób robienia tego, do czego właśnie wpadłem. Mimo że sprawdzanie poprawności formularzy nie jest uruchamiane po przesłaniu formularza za pomocą metody submit(), nic nie stoi na przeszkodzie, aby programistycznie kliknął przycisk przesyłania. Nawet jeśli jest ukryty.

Posiadające postać:

<form> 
    <input type="text" name="title" required /> 
    <button style="display: none;" type="submit" id="submit-button">Not Shown</button> 
    <button type="button" onclick="doFancyStuff()">Submit</button> 
</form> 

To wywoła formularz Walidacja:

function doFancyStuff() { 
    $("#submit-button").click(); 
} 

lub bez jQuery

function doFancyStuff() { 
    document.getElementById("submit-button").click(); 
} 

W moim przypadku, mam kilka walidacji i obliczeń kiedy przycisk fałszywego wysyłania jest wciśnięty, jeśli moja ręczna weryfikacja nie powiedzie się, wtedy wiem, że mogę programowo kliknij ukryty przycisk przesyłania i sprawdź formularz formularza.

Oto bardzo prosty jsfiddle przedstawiający koncepcję:

https://jsfiddle.net/45vxjz87/1/

Answer 8

Albo można zmienić typ przycisk do submit

<button type="submit" onclick="submitform()" id="save">Save</button> 

Albo można ukryć przycisk Prześlij, zachować inny przycisk z type = "button" i zdarzenie click dla tego przycisku

<form> 
    <button style="display: none;" type="submit" >Hidden button</button> 
    <button type="button" onclick="submitForm()">Submit</button> 
</form>