Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<!-- u každého inputu, který chci validovat si nastavím pravidlo, které chci použít (data-validation) a chybovou hlášku, která se má zobrazit, pokud je špatně vyplněné pole (data-alert) --> <form action="" method="post"> <p> <label for="jmeno">Jméno</label> <input type="text" name="first_name" data-validation="notempty" data-alert="Vyplňte jméno"> </p> <p> <label for="jmeno">Příjmení</label> <input type="text" name="last_name" data-validation="notempty" data-alert="Vyplňte příjmení"> </p> <p> <label for="jmeno">E-mail</label> <input type="text" name="email" data-validation="email" data-alert="Email je ve špatném formátu"> </p> <input type="submit" value="Odeslat"> </form>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
CSS
Autoformát
CSS reset
Až na konci
// Tady mám uložené funkce, pro validační pravidla, která používám. Každá funkce dostane hodnotu a vrací true nebo false podle toho, jestli je hodnota správně var Validations = { notempty: function(value) { return value.length > 0; }, email: function(value) { return value.match(/\S+@\S+\.\S+/); } }; // funkce na validování formuláře var validateForm = function(form) { // nastavím flag na true, formulář je v pořádku var formValid = true; // projdu všechny inputy ve formuláři form.find('input').each(function(){ // pravidlo uložené v data atributu validation var validation = $(this).data('validation'); // nejprve zkontroluji, jestli má input nastavené nějaké pravidlo a jestli existuje validační funkce pro pravidlo if(validation && Validations[validation]) { // zavolám validační funkci z objektu Validations a pokud není hodnota správně... if(!Validations[validation]($(this).val())) { // ... zobrazím chybovou hlášku a přesunu kurzor do inputu alert($(this).data('alert')); $(this).focus(); // nastavím flag na false a ukončím .each formValid = false; return false; } } }); // vrátím flag, který značí, jestli je formulář v pořádku nebo ne return formValid; }; // spuštění validace formuláře po odeslání $('form').on('submit', function(){ return validateForm($(this)); });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>