Najít snadno použitelné knihovny není snadné, ale občas se nějaká povede. Pro validaci formulářů mohu doporučit https://jqueryvalidation.org/ . Použití je opravdu přesně takové, jak naznačuje autor již v prvním řádku – easy. Je k tomu však zapotřebí ignorovat 99% souborů ve staženém balíčku.
Potřebovat budete pouze jquery.validate.min.js . Knihovnu nalinkujete standardním způsobem:
|
1 2 |
<script src="<?php echo Config::HOME_URL;?>vendor/components/jquery/jquery-3.2.1.min.js" type="text/javascript"></script> <strong><script src="<?php echo Config::HOME_URL;?>vendor/components/validation/jquery.validate.min.js" type="text/javascript"></script></strong> |
tzn. pod jQuery do hlavičky stránky. Poté umístíte pravidla, například:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<script type="text/javascript"> $(function() { $("form[name='poptavka']").validate({ // Specify validation rules rules: { // nalevo je name políčka formuláře, napravo pravidlo jmeno: "required", naklad: "required", email: { required: true, // Kontrola zda jde o správný formát e-mailové adresy email: true } }, // Jaká zpráva se zobrazí pokud je políčko chybně vyplněné messages: { jmeno: "Napište Vaše jméno nebo název firmy", naklad: "Zadejte počet kusů (náklad)", email: "Zadejte prosím Vaší platnou e-mailovou adresu" }, submitHandler: function(form) { form.submit(); } }); }); </script> |
A to je vše. Jenom nezapomeňte spárovat formulář s validací. Název (name) formuláře uveďte v selektoru před .validate() … viz. řádek č. 3 výše.
Formulář by mohl vypadat třeba takto:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<form name="poptavka" action="https://www.vassuperweb.cz/poptavka/" method="post"> <ul> <li><label>Co poptáváte</label> <input type="text" name="zakazka" /> </li> <li><label>Vaše jméno a příjmení (nebo název firmy)<span class="required">*</span></label> <input type="text" name="jmeno" /> </li> <li> <label>E-mail <span class="required">*</span></label> <input type="email" name="email" /> </li> <li> <label>Tel.</label> <input type="text" name="telefon" /> </li> <li> <label>Počet kusů <span class="required">*</span></label> <input type="text" name="naklad" placeholder="Počet kusů" /> ks </li> <li> <textarea name="pripominky" placeholder="Připomínky k poptávce" ></textarea> </li> <li><button class="buttonfx" data-sitekey="sdfglhggrsdgfg56696r4g165sd1fm" data-callback="onSubmit" data-action="submit" >Odeslat poptávku</button> <p> </p> </li> </ul> </form> |
Styly zde nijak neřeším.
Pro zajímavost jsou navíc v tagu button ještě parametry pro zabezpeční proti robotům.
Museli byste však do hlavičky stránky umístit ještě tyto řádky a z Google Captcha3 překopírovat klíč.
|
1 2 3 4 5 6 7 |
<script src="https://www.google.com/recaptcha/api.js"></script> <script> function onSubmit(token) { document.getElementById("poptavka").submit(); } </script> |