[ Príspevkov: 8 ] 
AutorSpráva
Offline

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

Registrovaný: 15.07.13
Prihlásený: 17.02.18
Príspevky: 241
Témy: 41 | 41
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
Online

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

Registrovaný: 19.03.07
Prihlásený: 19.02.18
Príspevky: 4529
Témy: 71 | 71
Bydlisko: BA
NapísalOnline : 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ý: 19.01.18
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;
}


Online

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

Registrovaný: 28.02.11
Prihlásený: 19.02.18
Príspevky: 180
Témy: 6 | 6
Bydlisko: Levice
Vek: 32
NapísalOnline : 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ý: 17.02.18
Príspevky: 241
Témy: 41 | 41
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
Online

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

Registrovaný: 19.03.07
Prihlásený: 19.02.18
Príspevky: 4529
Témy: 71 | 71
Bydlisko: BA
NapísalOnline : 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ý: 19.01.18
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');
  }
 });


Online

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

Registrovaný: 19.03.07
Prihlásený: 19.02.18
Príspevky: 4529
Témy: 71 | 71
Bydlisko: BA
NapísalOnline : 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

214

12.11.2012 11:42

RicK^

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

Kontrola

v PC zostavy

12

486

08.01.2009 22:37

Jaro

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

Kontrola

v PC zostavy

12

328

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

370

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

626

30.04.2010 0:07

maminkask

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

Kontrola originality

v Grafické programy

7

234

20.04.2013 19:30

walther

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

Kontrola PC

v PC zostavy

5

253

04.04.2012 3:04

jtbs

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

Kontrola Kompatibility

v PC zostavy

4

166

15.04.2017 16:09

kubinek17

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

Kontrola url

v PHP, ASP

15

463

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

568

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

130

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

605

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

432

22.02.2009 16:38

bayo15

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

SESSION Kontrola

v PHP, ASP

1

235

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

409

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

493

30.12.2007 15:36

Seto



© 2005 - 2018 PCforum, edited by JanoF