Estoy trabajando en un formulario web y se configuró con un campo de texto para recibir lo que se espera que sea un valor numérico. El formulario no se enviará si el contenido de este campo no es numérico, pero no se colocó ningún mensaje de error para que el usuario sepa que completó este campo incorrectamente.
Mi pregunta es... ¿hay alguna manera en tiempo real de comprobar lo que hay en la entrada y hacer algo para decirle al usuario que no lo está rellenando correctamente? Si todo está bien, quiero que el borde de la entrada sea verde, si no, haga que el borde sea rojo y cambie el texto predeterminado de la entrada para decirles que solo queremos números.
Esto es vagamente lo que tengo hasta ahora como mi punto de partida ...
HTML:
<input type="text" class="btn-blue" id="testing"></input>JS:
$('#testing').attr('placeholder', 'Enter Amount'); var useramount = $("#testing").val(); if (useramount.match(/^\d+$/)) { $("#testing").css({border: "2px solid #33CC00 !important"}); } else { $("#testing").css({border: "2px solid #FF0000 !important"}); $("#testing").innerHTML = ""; $('#testing').attr('placeholder', 'Only Numbers Please'); }Tomé prestado el principio básico de la validación de esta pregunta anterior: compruebe si solo se ingresaron valores numéricos en la entrada. (jQuery)
Cualquier ayuda es muy apreciada.
Puede usar el evento de entrada para obtener cambios cuando el usuario está escribiendo dentro del campo. En el evento de cambio, se le dará el elemento correspondiente al elemento de entrada al que se adjunta el detector de eventos como event.target . Usando esta referencia, puede obtener el valor de la entrada usando la propiedad de value en el elemento.
Una vez que haya recuperado el valor, deberá verificar que, de hecho, es numérico. Afortunadamente, jQuery proporciona un método llamado isNumeric que nos permite hacer precisamente eso.
Una vez que hayamos establecido el hecho de que el valor es realmente numérico, puede aplicar una clase o simplemente establecer el estilo que desee. Asegúrese de verificar también si el valor se ha vaciado para que el usuario no se confunda.
En cuanto al mensaje de validación, no es una buena idea establecer el valor de la entrada cuando el usuario interactúa con dicho elemento. En su lugar, he elegido agregar un elemento textual para representar el mensaje que se mostrará condicionalmente según el estado de validación.
// Add error message element after input. $('#some-number').after('<span class="error-message">Please enter numbers only!</span>') $('#some-number').on('input', function (evt) { var value = evt.target.value if (value.length === 0) { evt.target.className = '' return } if ($.isNumeric(value)) { evt.target.className = 'valid' } else { evt.target.className = 'invalid' } }) input { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; border: 1px solid black; } input.valid { border: 1px solid green; } input.invalid { border: 1px solid red; } input.invalid + .error-message { display: initial; } .error-message { display: none; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="some-number">Puede vincular su lógica de validación a un evento de pulsación de tecla como
$('#target').keydown(function () { // validation });o
$("#target").blur(function() { // validation });Ejemplo:
Puede hacer esto con el evento onkeypress . Cada vez que el usuario presiona una tecla mientras el cuadro de entrada está seleccionado, actualice el valor de la entrada.
Ejemplo:
var input = document.getElementById("input-box"); var inputValue = document.getElementById("input-box").value; input.addEventListener("keypress", function() { inputValue = document.getElementById("input-box").value; // do something with it }); <input id="input-box"/>Espero no haberme equivocado en nada.