[ Príspevkov: 8 ] 
AutorSpráva
Offline

Užívateľ
Užívateľ
kontrola fomruláru

Registrovaný: 15.07.13
Prihlásený: 27.05.18
Príspevky: 243
Témy: 42 | 42
NapísalOffline : 14.11.2017 15:05 | kontrola fomruláru

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


_________________
PC: MB MSI 970A-G43 CPU AMD FX6300 6*3,50GHt turbo 4,1Ghz GPU Gigabyte r7 370 windforce oc edition 2GB Ram 8GB Kingston fury hyperx 1866Mhz SSD:Kingston SSDNow V300 120GB
HDD:Seagete baracuda 1TB 7200rpm HDD2 Samsung HD502HJ 500GB 7200RPM PSU fortron hexa + 500W cpu chladič zalman CNPS5X Performa
NOTEBOOK:HP Elitebook 8460p
Tablet:Prestigio visconte Quad:
Mobil: Microsoft Lumia 640 Dual sim

Auto:Chevrolet camaro 1986 IROC-Z
Offline

Skúsený užívateľ
Skúsený užívateľ
kontrola fomruláru

Registrovaný: 19.03.07
Prihlásený: 22.04.26
Príspevky: 7084
Témy: 86 | 86
Bydlisko: BA
NapísalOffline : 14.11.2017 15:25 | kontrola fomruláru

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.


Naposledy upravil void dňa 14.11.2017 16:02, celkovo upravené 1

_________________
Desktop: CPU AMD R7 1700x @ 3.85GHz | Cooling be quiet! Dark Rock Pro 4 | MB ASRock X470 Taichi Ult. | RAM 4x8GB DDR4 G-SKILL TridentZ RGB 3000 CL16-16-16-36 | VGA XFX RX6800XT | SSD Crucial MX300 525GB | HDD Seagate Ironwolf 3TB 5900rpm | PSU CORSAIR RM750X | MONITOR AOC Q3279VWFD8 | MOUSE HyperX Pulsefire FPS + Razer eXactMat | HyperX Alloy FPS Brown | HyperX Cloud | ARCH x64 &
Notebook: Mac M4 Air 512 &
Mobil: Pixel 7a & SBC: Raspberry pi 0 | 3B+ & Headphones: Senheiser HD58X | AKG K551 + detachable cable mod | Linsoul TIN T2 | KZ SZN
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 06.02.14
Prihlásený: 19.01.18
Príspevky: 443
Témy: 9 | 9
NapísalOffline : 14.11.2017 15:59 | kontrola fomruláru

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;
}


Offline

Užívateľ
Užívateľ
kontrola fomruláru

Registrovaný: 28.02.11
Prihlásený: 26.01.26
Príspevky: 205
Témy: 6 | 6
Bydlisko: Bratislava
NapísalOffline : 14.11.2017 16:08 | kontrola fomruláru

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


_________________
Neznalosť zložitých operácií necháva myseľ otvorenú pre geniálne riešenia založené na jednoduchosti.
Offline

Užívateľ
Užívateľ
kontrola fomruláru

Registrovaný: 15.07.13
Prihlásený: 27.05.18
Príspevky: 243
Témy: 42 | 42
Napísal autor témyOffline : 14.11.2017 16:08 | kontrola fomruláru

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


_________________
PC: MB MSI 970A-G43 CPU AMD FX6300 6*3,50GHt turbo 4,1Ghz GPU Gigabyte r7 370 windforce oc edition 2GB Ram 8GB Kingston fury hyperx 1866Mhz SSD:Kingston SSDNow V300 120GB
HDD:Seagete baracuda 1TB 7200rpm HDD2 Samsung HD502HJ 500GB 7200RPM PSU fortron hexa + 500W cpu chladič zalman CNPS5X Performa
NOTEBOOK:HP Elitebook 8460p
Tablet:Prestigio visconte Quad:
Mobil: Microsoft Lumia 640 Dual sim

Auto:Chevrolet camaro 1986 IROC-Z
Offline

Skúsený užívateľ
Skúsený užívateľ
kontrola fomruláru

Registrovaný: 19.03.07
Prihlásený: 22.04.26
Príspevky: 7084
Témy: 86 | 86
Bydlisko: BA
NapísalOffline : 14.11.2017 16:32 | kontrola fomruláru

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...


_________________
Desktop: CPU AMD R7 1700x @ 3.85GHz | Cooling be quiet! Dark Rock Pro 4 | MB ASRock X470 Taichi Ult. | RAM 4x8GB DDR4 G-SKILL TridentZ RGB 3000 CL16-16-16-36 | VGA XFX RX6800XT | SSD Crucial MX300 525GB | HDD Seagate Ironwolf 3TB 5900rpm | PSU CORSAIR RM750X | MONITOR AOC Q3279VWFD8 | MOUSE HyperX Pulsefire FPS + Razer eXactMat | HyperX Alloy FPS Brown | HyperX Cloud | ARCH x64 &
Notebook: Mac M4 Air 512 &
Mobil: Pixel 7a & SBC: Raspberry pi 0 | 3B+ & Headphones: Senheiser HD58X | AKG K551 + detachable cable mod | Linsoul TIN T2 | KZ SZN
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 06.02.14
Prihlásený: 19.01.18
Príspevky: 443
Témy: 9 | 9
NapísalOffline : 14.11.2017 18:12 | kontrola fomruláru

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');
  }
 });


Offline

Skúsený užívateľ
Skúsený užívateľ
kontrola fomruláru

Registrovaný: 19.03.07
Prihlásený: 22.04.26
Príspevky: 7084
Témy: 86 | 86
Bydlisko: BA
NapísalOffline : 14.11.2017 18:19 | kontrola fomruláru

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


_________________
Desktop: CPU AMD R7 1700x @ 3.85GHz | Cooling be quiet! Dark Rock Pro 4 | MB ASRock X470 Taichi Ult. | RAM 4x8GB DDR4 G-SKILL TridentZ RGB 3000 CL16-16-16-36 | VGA XFX RX6800XT | SSD Crucial MX300 525GB | HDD Seagate Ironwolf 3TB 5900rpm | PSU CORSAIR RM750X | MONITOR AOC Q3279VWFD8 | MOUSE HyperX Pulsefire FPS + Razer eXactMat | HyperX Alloy FPS Brown | HyperX Cloud | ARCH x64 &
Notebook: Mac M4 Air 512 &
Mobil: Pixel 7a & SBC: Raspberry pi 0 | 3B+ & Headphones: Senheiser HD58X | AKG K551 + detachable cable mod | Linsoul TIN T2 | KZ SZN
 [ Príspevkov: 8 ] 


kontrola fomruláru



Podobné témy

 Témy  Odpovede  Zobrazenia  Posledný príspevok 
V tomto fóre nie sú ďalšie neprečítané témy.

Kontrola

v PC zostavy

12

933

04.09.2011 14:53

bindo000

V tomto fóre nie sú ďalšie neprečítané témy.

kontrola

v Antivírusy a ochrana

0

768

13.02.2010 16:15

stancoj

V tomto fóre nie sú ďalšie neprečítané témy.

Kontrola

v PC zostavy

11

724

12.11.2012 11:42

RicK^

V tomto fóre nie sú ďalšie neprečítané témy.

Kontrola

v PC zostavy

12

1022

08.01.2009 22:37

Jaro

V tomto fóre nie sú ďalšie neprečítané témy.

kontrola LOGu

v Antivírusy a ochrana

1

722

23.09.2008 16:03

dedko45

V tomto fóre nie sú ďalšie neprečítané témy.

kontrola pc

v Antivírusy a ochrana

4

2349

07.01.2008 11:31

br4n0

V tomto fóre nie sú ďalšie neprečítané témy.

Kontrola kodu

v Backend

3

2753

01.11.2006 10:55

itsgoingd

V tomto fóre nie sú ďalšie neprečítané témy.

Kontrola Kompatibility

v PC zostavy

4

461

15.04.2017 16:09

kubinek17

V tomto fóre nie sú ďalšie neprečítané témy.

kontrola uloh

v Backend

0

683

29.05.2009 23:33

Romanko

V tomto fóre nie sú ďalšie neprečítané témy.

zostava - kontrola

v PC zostavy

11

862

06.06.2008 22:51

piskvorko

V tomto fóre nie sú ďalšie neprečítané témy.

Zostava - kontrola

v PC zostavy

3

525

03.12.2012 19:24

davtom

V tomto fóre nie sú ďalšie neprečítané témy.

Kontrola zostavy

v PC zostavy

10

726

31.08.2011 11:45

mirom

V tomto fóre nie sú ďalšie neprečítané témy.

Kontrola PC

v Antivírusy a ochrana

2

1733

27.09.2007 21:01

Rbot

V tomto fóre nie sú ďalšie neprečítané témy.

rodičovská kontrola

v Windows

2

640

01.02.2011 15:53

makonm

V tomto fóre nie sú ďalšie neprečítané témy.

Kontrola logu

v Antivírusy a ochrana

10

1668

02.01.2010 19:04

kontingent

V tomto fóre nie sú ďalšie neprečítané témy.

Kontrola Logu.

v Antivírusy a ochrana

0

626

01.09.2008 20:02

tinozv



© 2005 - 2026 PCforum, edited by JanoF