Sprawdzaj wszystkie pola naraz za pomocą HTML5 zamiast jednego na raz.

Czy istnieje sposób na sprawdzenie, czy HTML5 sprawdza wszystkie pola naraz zamiast pojedynczo?Sprawdzaj wszystkie pola naraz za pomocą HTML5 zamiast jednego na raz.

Używanie kilku linii kodu JavaScript jest OK, ale tak naprawdę nie chcę używać do tego całego modułu.

Szukałem całkiem sporo, ale nie mogłem znaleźć dla tego czystego rozwiązania.

Oto przykładowy formularz: plik

<html> 
    <head> 
     <title>Validation Test</title> 
     <link href="css/style.css" rel="stylesheet"> 
    </head> 
    <body> 
     <form action="" id="myForm" method="post"> 
     <input id="name" name="name" required type="text"> 
     <input id="phone" name="phone" required type="text"> 
     <input type="submit" value="Submit"> 
     </form> 
    </body> 
</html>

CSS:

input:focus:required:invalid { 
    border: 2px solid red !important; 
}

post sugerowane jako duplikat możliwe jest za to, że wiele warunków walidacji na jednym polu, jestem szukający potwierdzenia/pokaż wszystkie nieprawidłowe pola na raz.

Źródło

2015-09-29 Mankind1023

możliwe duplikat [jak zrobić walidację Input Multiple przy użyciu HTML5?] (Http://stackoverflow.com/questions/14114267/how-to-make-multiple-input-validation-using-html5) – halfzebra

Dziękuję, ale ten wpis dotyczy wielu warunków sprawdzania poprawności dla jednego pola, dlatego chciałbym sprawdzić poprawność/pokazać wszystkie nieprawidłowe pola na raz. – Mankind1023

Czy robisz tylko podstawowe (bez zerowych pól) sprawdzanie poprawności, czy coś bardziej złożonego? –

Jeśli nie chcesz używać jQuery, że jest w porządku. Możesz to łatwo zrobić za pomocą programów do obsługi zdarzeń jilli i selektorów DOM. Używam jQuery dla oszczędności czasu.

$('#myForm').on('submit', function() { 
    var $inputs = $(this).find(':input'), 
     isValid = true; 

    $inputs.each(function() { 
    if ($(this).val() == '') { 
     isValid = false; 
     $(this).addClass('error-control'); 
    } else { 
     $(this).removeClass('error-control'); 
    } 
    }); 

    return isValid 
});

Źródło

2015-09-29 17:30:32

To naprawdę dobrze pasowało do tego, co robiłem, dziękuję. – Mankind1023

Użyj onSubmit na metce Kształt:

Patrz: http://www.w3schools.com/js/js_validation.asp

<form action="" id="myForm" method="post" onsubmit="return validateForm()">

JS:

function validateForm() { 
    // validate form here 
    // return false if there are errors 
    // return true to submit the form 
}

Źródło

2015-09-29 17:25:41

Sprawdzaj wszystkie pola naraz za pomocą HTML5 zamiast jednego na raz.

Odpowiedz

Powiązane problemy