Egyedi validációt hogyan tudok készíteni?
Üdvözletem!
Pl, ha az input type: e-mail, akkor mindig kapok egy automata üzenetet, hogy írjak be egy email címet!
Szeretném eltüntetni ezt az automata üzenetet, mit kell tennem, hogy csak egy piros színű border legyen az input mező körül?
Nekem egy input mezőm a következő módon néz ki:
<input name="names" id="names" class="sform" onblur="if (this.value == '') {this.value = 'Név';}" onfocus="if (this.value == 'Név') {this.value = '';}" value="Név" required="required" type="text"/>
Próbálkoztam a következővel,
de sajnos ha type="text" akkor így nem működik, mivel természetesen beírt szövegnek érzékeli, viszont ettől a megoldástól nem igen válnék meg.
Esetleg tud valaki valamilyen megoldást erre, hogy hogyan írjam át a kódot?
Az is elég, hogy csak egy piros keret legyen, minden esetben, ha így adom meg az input mezőt, type:text esetén is.
Előre is köszönöm!!!!
válasza:Ez az onblur, onfocus logika teljes egészében lecsrélhető (sőt) a placeholder attribútummal:
<input placeholder="Név">
Egyébiránt amire te panaszkodsz, az beépített böngésző feature, és nem nagyon biztosítanak lehetőséget a módosítására, arra viszont igen, hogy felüldefiniáld őket.
Itt egy elég egyszerű példa arra, hogy hogyan tudod elérni az efféle viselkedést:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.invalid{
border: 2px solid red;
}
</style>
</head>
<body>
<form id="form">
<input type="email" required placeholder="Email">
<input type="text" required placeholder="Keresztnév">
<input type="text" required placeholder="Vezetéknév">
<input type="submit" text="Gomb">
</form>
</body>
<script>
document.querySelector("#form").addEventListener('invalid', function(e){
e.preventDefault();
e.target.classList.add('invalid');
},true)
document.querySelector("#form").addEventListener('input', function(e){
e.target.classList.remove('invalid');
event.target.checkValidity();
},true)
</script>
</html>
válasza::invalid kijelölő és box-shadow tulajdonság:
válasza:Kedves Első választ adó!
Köszönöm, hogy foglalkoztál a kérdésemmel!!
A placeholdert azért nem akartam használni, mert azt szerettem volna elérni, hogy ha az input mezőbe belekattintok, a szöveg eltűnjön, s ha máshova kattintok akkor visszaírja, hogy mit is kell az inputmezőbe beleírni.
A placeholder, meg nem ezekkel a tulajdonságokkal viselkedik.
Most, hogy gondolkoztam, esetleg el lehetne azt érni, hogy az általam mutatott "validatrix" úgy viselkedjen, hogy érzékelje az automatikusan visszaírt és a gépelt szöveg közti különbséget? S ezt beilleszteném a type: text-hez, s akkor nem lenne probléma...
Előre is köszönöm, addig is próbálkozom. :-)
Kedves Kettes választ adó!
Köszönöm a választ de sajnos nem működik, az automatikus üzenet ugyanúgy megjelenik.
válasza:#4 Szeretnéd a placeholder viselkedését szabályozni, azt az alábbiakkal meg tudod csinálni:
#form input:focus::-webkit-input-placeholder { color:transparent; }
#form input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
#form input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
#form input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
Ez pl láthatatlanná teszi a palceholder szövegét amikor belekattintasz, így olyan, mintha eltűnne.
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!