[ Príspevkov: 8 ] 
AutorSpráva
Offline

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

Registrovaný: 15.07.13
Prihlásený: 16.11.17
Príspevky: 238
Témy: 39 | 39
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ý: 21.11.17
Príspevky: 3876
Témy: 67 | 67
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 FX8350@4.514 | Cooling GELID Solutions Tranquillo rev 2 + Noctuaa NF-S12B 1200 | MB ASUS M5A99FX PRO R2.0 | RAM 2x8GB DDR3 Patriot 1600MHz CL9 Viper 3 | VGA Palit 1060 DUAL 6G | SSD Crucial MX300 525GB | HDD Seagate Ironwolf 3TB 5900rpm | PSU CORSAIR CX600M | MONITOR iiyama prolite E2473HDS | MOUSE Roccat SAVU + Razer eXactMat | TeamWolf VOD STORM | OS W10Pro x64 &
Server:CPU XEON X5450@3.0 | Cooling ninja Scythe 2 + Noctuaa NF-S12B 700 | MB ASUS P5Q | RAM 2x2+2x1GB A-DATA 800MHz | VGA ASUS 7600GT Silent 256MB | SSD Crucial M4 128GB | PSU EVGA 500B | Corsair K30 US | Archlinux x86_64 &
Notebook: DELL inspiron 7537 i7 4500U, 8GB RAM, nv750, FHD IPS, 1TB HDD | MOUSE Roccat Savu + Roccat Taito | WIN10Pro InsiderPreview x64 + ArchLinux x64 &
Mobil: OnePlus One | FW LineageOS 14.1 Nightly & Mobil: Blackberry Passport | 10.3.2 & Tablet: ASUS TF101 32G + dock | FW Stock
Offline

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

Registrovaný: 06.02.14
Prihlásený: 16.11.17
Príspevky: 451
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ý: 20.11.17
Príspevky: 178
Témy: 6 | 6
Bydlisko: Levice
Vek: 31
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ý: 16.11.17
Príspevky: 238
Témy: 39 | 39
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ý: 21.11.17
Príspevky: 3876
Témy: 67 | 67
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 FX8350@4.514 | Cooling GELID Solutions Tranquillo rev 2 + Noctuaa NF-S12B 1200 | MB ASUS M5A99FX PRO R2.0 | RAM 2x8GB DDR3 Patriot 1600MHz CL9 Viper 3 | VGA Palit 1060 DUAL 6G | SSD Crucial MX300 525GB | HDD Seagate Ironwolf 3TB 5900rpm | PSU CORSAIR CX600M | MONITOR iiyama prolite E2473HDS | MOUSE Roccat SAVU + Razer eXactMat | TeamWolf VOD STORM | OS W10Pro x64 &
Server:CPU XEON X5450@3.0 | Cooling ninja Scythe 2 + Noctuaa NF-S12B 700 | MB ASUS P5Q | RAM 2x2+2x1GB A-DATA 800MHz | VGA ASUS 7600GT Silent 256MB | SSD Crucial M4 128GB | PSU EVGA 500B | Corsair K30 US | Archlinux x86_64 &
Notebook: DELL inspiron 7537 i7 4500U, 8GB RAM, nv750, FHD IPS, 1TB HDD | MOUSE Roccat Savu + Roccat Taito | WIN10Pro InsiderPreview x64 + ArchLinux x64 &
Mobil: OnePlus One | FW LineageOS 14.1 Nightly & Mobil: Blackberry Passport | 10.3.2 & Tablet: ASUS TF101 32G + dock | FW Stock
Offline

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

Registrovaný: 06.02.14
Prihlásený: 16.11.17
Príspevky: 451
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ý: 21.11.17
Príspevky: 3876
Témy: 67 | 67
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 FX8350@4.514 | Cooling GELID Solutions Tranquillo rev 2 + Noctuaa NF-S12B 1200 | MB ASUS M5A99FX PRO R2.0 | RAM 2x8GB DDR3 Patriot 1600MHz CL9 Viper 3 | VGA Palit 1060 DUAL 6G | SSD Crucial MX300 525GB | HDD Seagate Ironwolf 3TB 5900rpm | PSU CORSAIR CX600M | MONITOR iiyama prolite E2473HDS | MOUSE Roccat SAVU + Razer eXactMat | TeamWolf VOD STORM | OS W10Pro x64 &
Server:CPU XEON X5450@3.0 | Cooling ninja Scythe 2 + Noctuaa NF-S12B 700 | MB ASUS P5Q | RAM 2x2+2x1GB A-DATA 800MHz | VGA ASUS 7600GT Silent 256MB | SSD Crucial M4 128GB | PSU EVGA 500B | Corsair K30 US | Archlinux x86_64 &
Notebook: DELL inspiron 7537 i7 4500U, 8GB RAM, nv750, FHD IPS, 1TB HDD | MOUSE Roccat Savu + Roccat Taito | WIN10Pro InsiderPreview x64 + ArchLinux x64 &
Mobil: OnePlus One | FW LineageOS 14.1 Nightly & Mobil: Blackberry Passport | 10.3.2 & Tablet: ASUS TF101 32G + dock | FW Stock
 [ 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

11

154

12.11.2012 11:42

RicK^

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

Kontrola

v PC zostavy

12

451

08.01.2009 22:37

Jaro

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

Kontrola

v PC zostavy

12

246

04.09.2011 14:53

bindo000

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

kontrola

v Antivíry a antispywary

0

339

13.02.2010 16:15

stancoj

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

Kontrola logu

v Antivíry a antispywary

0

592

30.04.2010 0:07

maminkask

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

Kontrola originality

v Grafické programy

7

198

20.04.2013 19:30

walther

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

Kontrola PC

v PC zostavy

5

223

04.04.2012 3:04

jtbs

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

Kontrola Kompatibility

v PC zostavy

4

150

15.04.2017 16:09

kubinek17

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

Kontrola url

v PHP, ASP

15

431

21.04.2010 13:45

vladopt

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

Kontrola HijackThis

v Antivíry a antispywary

5

534

04.09.2008 17:22

DAve12345

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

Kontrola striktnosti

v HTML, XHTML, XML, CSS

2

93

19.11.2012 18:55

shaggy

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

kontrola logu

v Antivíry a antispywary

11

572

05.01.2008 11:00

feldino

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

kontrola logu

v Antivíry a antispywary

3

401

22.02.2009 16:38

bayo15

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

SESSION Kontrola

v PHP, ASP

1

209

05.03.2010 9:51

janik366

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

kontrola logu

v Antivíry a antispywary

2

390

28.08.2008 14:00

yaJohny

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

Kontrola logu

v Antivíry a antispywary

3

465

30.12.2007 15:36

Seto



© 2005 - 2017 PCforum, edited by JanoF