Input içerisindeki değeri regex koşuluna göre yazmak istiyorum.
Selam arkadaşlar, bir input içerisindeki değeri, kullanıcı yazdıkça belirli bir formatta göstermek istiyorum.
Örneğin;
0(5xx) xxx xx xx
xx:xx
xx-xx-xxxx vs.
Kullanıcı inputa yazdıkça input değeri belirlediğim regex kuralına göre görünsün ve valide olsun istiyorum. Bunu nasıl yapabilirim?
Bu benim ilk sorum o yüzden hatalarım varsa linç etmeyin :)
Teşekkür ederim.
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (2)
O zaman hoşgeldin diyelim :) Kategorileri seçerken dikkat edersen çok daha mutlu oluruz ^^ soruna gelecek olursak
input mask olayını istiyorsan bunun için yazılmış pluginler var, yeniden yazmak yerine onları tercih edebilirsin
https://github.com/RobinHerbots/Inputmask (en popüleri)
jquery kütüphanesi ve eklenti dosyasını çağırdıktan sonra istediğin örnekleri şöyle elde edebilirsin
$('.elem').inputmask("0(599) 999 99 99")
$('.elem2').inputmask("99:99")
$('.elem3').inputmask("99-99-9999")
kısaca senin x
dediğin yerlere eklentide 9
koyuyoruz. Eğer harf yazsınlar dersen 9
yerine a
koyabilirsin. Hem harf hem sayı dersende 9-a
koyabilirsin senin x
dediğin değerlere. İstersen daha fazla kullanımına eklenti dökümanından bakabilirsin.
Demo: https://codepen.io/tayfunerbilen/pen/abJrbYa
Eğer ben sadece valid olup olmadığını kontrol etmek istiyorum diyorsan şöyle bir şey de olabilir
<form action="" novalidate="novalidate">
<input type="text" placeholder="0(5xx) xxx xx xx" pattern="0\(5[0-9]{2}\) [0-9]{3} [0-9]{2} [0-9]{2}" required />
<input type="text" placeholder="xx:xx" pattern="[0-9]{2}:[0-9]{2}" required />
<input type="text" placeholder="xx-xx-xxxx" pattern="[0-9]{2}-[0-9]{2}-[a-z]{4}" required />
</form>
<style>
input {
outline: 0;
}
input:invalid {
border-color: red;
}
input:valid {
border-color: green;
}
</style>