0
203
Views¿Cómo alertar bajo texto de entrada con condiciones?
quiero dividir la alerta. Entonces, cuando el valor está vacío o es nulo, se debe ingresar la alerta nama pengguna . Y si el valor es inferior a 5, la alerta tiene un mínimo de 5 caracteres .
Porque el estilo es solo como este (texto rojo, debajo del texto de entrada). Me refiero a no usar la alerta de javascript.
Este es mi código:
function checkLength() { var textbox = document.getElementById("username"); if(textbox.value.length <= 5) { alert("min 5 characters"); } else if(textbox.value.length == 0){ alert("nama pengguna must inputed") } } <div class="form-group required2"> <label class="control-label visible-ie8 visible-ie9">Nama Pengguna</label> <div class="input-icon"> <i class="fa fa-user"></i> <input id="username" class="form-control placeholder-no-fix" pattern=".{5,}" type="text" autocomplete="off" placeholder="Nama Pengguna" name="username" onchange="checkLength()" required title="nama pengguna must inputed (min 5 characters)"> </div> </div>Gracias.
3 answers
Answer question0
Puede crear una p tag y agregar esos errors como se sugiere, es decir, la longitud de los caracteres debe ser inferior a 5 , como se muestra a continuación, incluso hice algunas correcciones en las condiciones.
var textbox = document.getElementById("username"); var pr = document.createElement("p"); function nm(){ if(textbox.value.length >= 1 && textbox.value.length <= 5){ pr.textContent = "min 5 characters"; document.body.appendChild(pr); } else if(textbox.value.length === 0){ pr.textContent = "nama pengguna must inputed"; document.body.appendChild(pr); } } textbox.addEventListener("blur",nm); p{ color:red; } <div class="form-group required2"> <label class="control-label visible-ie8 visible-ie9">Nama Pengguna</label> <div class="input-icon"> <i class="fa fa-user"></i> <input id="username" class="form-control placeholder-no-fix" pattern=".{5,}" type="text" autocomplete="off" placeholder="Nama Pengguna" name="username" required title="nama pengguna must inputed (min 5 characters)" /> </div> </div>0
Si desea cambiar su mensaje en consecuencia, estará luchando contra la validación de HTML5, pero eso no será un problema demasiado grande.
Lo que debe hacer es verificar el valor cuando los datos han cambiado.
Ponga lo siguiente en su código de estado:
document.querySelector('input#username').onchange=function() { checkLength(); }Por código de inicio, me refiero a lo que sea que uses para iniciar tu script. Tuypicamente es algo como:
document.addEventListener('DOMContentLoad',init,false); function init() { }o, para navegadores más antiguos,
window.onload=init;0
Si desea convertir la alerta en un mensaje de texto simple, siga el código a continuación.
HTML
<div class="form-group required2"> <label class="control-label visible-ie8 visible-ie9">Nama Pengguna</label> <div class="input-icon"> <i class="fa fa-user"></i> <input id="username" class="form-control placeholder-no-fix" pattern=".{5,}" type="text" autocomplete="off" placeholder="Nama Pengguna" name="username" required title="nama pengguna must inputed (min 5 characters)" /> <span class="username_error" class="error"></span> </div> </div>JavaScript
<script> function checkLength(){ var textbox = document.getElementById("username"); if(textbox.value.length <= 5){ document.getElementById('username_error').innerHTML = "min 5 characters"; } else(textbox.value.length == 0){ document.getElementById('username_error').innerHTML = "nama pengguna must inputed"; } } </script>CSS
<style> .error{ color:"red"; } </style>