kontrola fomruláru

camarovk19 · Napísal **camarovk19**: 14.11.2017 15:05

mám taký problém že pri kontrole formuláru ak nie je vyplnení text input alebo sa heslá nezhodujú má vypísať vedľa toho text inputu červený výkričník ale netuším ako ho vypísať
momentálne som tam dal alert aby som videl či to funguje ale nemá tam byť alert má to vypisovať červený výkričník tam v ktorom poli je chyba

Kód:

<!DOCTYPE html>
<html>
<head>
  <title>Kontrola formulára</title>
  <meta charset="utf-8">
  <script>
    function checkForm() {
      var name = document.formCheckName.name.value;
      var cont = document.formCheckName.pass.value;
      var contr = document.formCheckName.cpass.value;
      if (name == "")
        alert("Nezadali ste meno");
      else
        alert("Gratulujeme");

    if(cont == contr)
      alert("su rovnake");
    else {
      alert("nie su rovnake")
    }
    }
  </script>
</head>
<body>
  <form name="formCheckName" onSubmit="return checkForm();">
    Meno: <input name="name" type="text">
    <input type="submit" value="Odošli"><br>
    Heslo: <input name="pass" type="password"><br>
    Heslo2: <input  name="cpass" type="password">
  </form>
</body>
</html>

Ďakujem za rady

void · Napísal **void**: 14.11.2017 15:25

Piozri si jQuery alebo JS selector.
napirklad cez jquery by to vypadalo takto.

Das si nejake ID pre inpu type meno napriklad. povedzme ze 'id="form_name"'.
Zoberes jQuery (includnejs kniznicu do hlavicky suboru)
pouzijes .css() na pridanie napriklad cerveneho ramceka okolo input-u.
alebo tam das cerveny vykricknik, das ho hidden a iba ho zobrazis ked treba.
alebo tam das cervene pozadie, kde to je chybne.
alebo fantazia.

hatto13 · Napísal **hatto13**: 14.11.2017 15:59

alebo sa vyhnes jquery a usetris zbytocne stahovanie nepotrebnej kniznice a urobis to iste co napisal void ale v cistom javascripte.
osobne by som odporucil neupravovat css styly v js, ale urobit to zmenou triedy napr:

Kód:

var myForm = document.getElementById('form_name');
myForm.classList.add('invalid'); // pridanie css triedy
myForm.classList.remove('invalid'); // odobratie css triedy

a v css napr:

Kód:

form.invalid input {
 background: red;
}

weroro · Napísal **weroro**: 14.11.2017 16:08

Ak upravím pôvodný kód http://kod.djpw.cz/xtkc

camarovk19 · Napísal autor témy **camarovk19**: 14.11.2017 16:08

Kód:

<!DOCTYPE html>
<html>
<head>
  <title>Kontrola formulára</title>
  <meta charset="utf-8">
  <script>
    function checkForm() {
      var name = document.formCheckName.name.value;
      var cont = document.formCheckName.pass.value;
      var contr = document.formCheckName.cpass.value;
      if (name == "")
        document.getElementById("mark").innerHTML = "!";
      else
         document.getElementById("mark").innerHTML = "";
   if(cont == contr)
      alert("chyba");
    else
      alert("chyba");
    }
  </script>
<style>
.red{
  color: red;
}
</style>
</head>
<body>
  <form name="formCheckName" onSubmit="return checkForm();">
    <input type="submit" value="Odošli"><br>
    Meno:<input name="name" type="text"><p id="mark" class="red"></p>
    Heslo: <input name="pass" type="password"><p id="mar" class="red"></p>
    Heslo2: <input  name="cpass" type="password">
  </form>
</body>
</html>

momentálne to mám takto ale problém je v tom že výkričník mi iba preblikáva

void · Napísal **void**: 14.11.2017 16:32

mas tam typo "mar" miesto mark.
Odporucal by som ti pozriet si eventy v JS.
Menovite "onfocus" a "focusin". Aj ked toto je zastaraly pristup. HTML5 ma celkom pekne osetrenia, aj ked mi pridu trochu nehomogenne, v tom co vedia.
Proste pripnes na input event listener, ktory, ked dany event zbehne, zapnu funkciu, ktora skontroluje obsah pola a ci je OK.

Zase jQuery ma celkom pekne .focus() a callback-y...

hatto13 · Napísal **hatto13**: 14.11.2017 18:12

preblikava ti preto, ze napriek tomu ze ti zobrazi chybu, ten formular ti odosle a refreshne ti stranku. musis tam mat aj 'return false' ak chces zabranit odoslaniu formularu

s tym 'focus' eventom to nie je zly napad, resp. skor blur - zavola ti event ked opustis input, focus je ked vstupis do inputu. ale nepotrebujes na to jquery, javascript ti aj na toto staci

nieco ako:

Kód:

 var inputName = document.querySelector('input.name'); // treba doplnit triedu do html
 inputName.on('blur', function(e) {
  if (this.value == "") {
   this.classList.add('error');
  }
 });

void · Napísal **void**: 14.11.2017 18:19

A este by bolo fajn pridat "disabled" na odosielaci gombik, ktory sa zrusi, az ked vsetky chacky zbehnu v poriadku.

kontrola fomruláru

Podobné témy