Hogyan tudom a automatikus hibaüzeneteket eltüntetni?
Jó napot Mindenkinek!
Egy formot készítettem mely a hírlevélre való feliratkozáshoz van.
Név, e-amil cím és feliratkozás gombból áll.
Ha rákattintok az elküld gombra, és nincs kitöltve az e-mail és név mező, akkor az e-mail címnél megjelenik, hogy "írjon be egy e-mail címe".
Nem szeretném, ha szöveg jelenne meg, csak annyit szeretnék, hogy az input mezők körül egy 1px solid border legyen.
És mind a két mező körül, ha egyiket sem töltöm ki.
Ezt hogyan tudom megvalósítani?
A segítséget, előre is nagyon köszönöm,
üdvözlettel,
András
válasza:2 lehetőséged van:
- add1:
Szerver oldalon ellenőrzöd, és úgy küldöd ki az adatokat a View-nak, hogy abban a módban jelenjen meg.
- add2:
JavaScript-el ellenőrzöd.
Pl.: jQuery, vagy Vue-vel. (Elöbbi egy library, míg az utóbbi egy Framework)
válasza:<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=" [link]
<style>
#subscribe_form span {
display: block;
}
#subscribe_form input[type="text"] {
border: 1px solid #666666;
display: block;
}
#subscribe_form input[type="text"].empty-field {
border: 1px solid #ff1109;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#subscribe_form").find(":button").click(function(){
if (!isFieldsEmpty()) {
$("#subscribe_form").submit();
}
});
$("#subscribe_form").find(":text").change(function(){
$(this).removeClass("empty-field");
});
});
function isFieldsEmpty() {
var result = false;
if ($("#subscribe_form").find("input[name='name']").val() == "") {
$("#subscribe_form").find("input[name='name']").addClass("empty-field");
result = true;
}
if ($("#subscribe_form").find("input[name='email']").val() == "") {
$("#subscribe_form").find("input[name='email']").addClass("empty-field");
result = true;
}
return result;
}
</script>
</head>
<body>
<form id="subscribe_form" action="">
<p><span>Név: </span><input type="text" name="name" value="" \></p>
<p><span>E-mail: </span><input type="text" name="email" value="" \></p>
<p><input type="button" value="Feliratkozás" \></p>
</form>
</body>
</html>
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!