validacion - validar input javascript
Tipo de entrada HTML5=comportamiento de paso de cambio de número (8)
Si utilizo un campo de entrada de tipo = "número" con paso = "100". No quiero que los números impares sean inválidos. Solo quiero aumentar o disminuir con un valor de 1000.
<input type="number" min="100" max="999999" step="100" />
Si el usuario ingresa el valor "199" y lo envía, recibe un error porque el valor no se puede dividir por 100. Pero todo lo que quiero con el valor de paso es controlar el comportamiento del control de giro, por ejemplo, si el usuario haga clic arriba Quiero que el valor 199 se convierta en 200 y si él / ella hace clic en abajo quiero que se convierta en 100. O lo ideal sería que el valor se incremente o disminuya con un valor de 100.
¿Cómo hago esto? Intenté usar el evento no válido (con jQuery 1.7.2) de esta manera:
$( "[type=''number'']" ).bind( ''invalid'', function( e ) {
var el = $( this ),
val = el.val( ),
min = el.attr( ''min'' ),
max = el.attr( ''max'' );
if ( val >= min && val <= max ) {
return false;
}
} );
Pero esto da lugar a que el formulario no se presente.
PS .: Esto está en Google Chrome 20.0.1132.57 en Fedora 16.
Aquí está el código necesario para lograr lo que pidió. Traté de evitar los nuevos cálculos y cambiar el comportamiento estándar, por lo que debería ser transparente a cualquier otra restricción que se establezca (requerido, patrón, rangos ...).
Solo probé en Firefox y Chrome, pero creo que debería funcionar en cualquier navegador reciente.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Disable validity constrains</title>
<!-- avoid highlight due to constrains -->
<style>#qty { box-shadow: unset; }</style>
</head>
<body>
<form>
<input id="qty" name="num" type="number" min="100" max="1000" step="100">
<input type="submit">
</form>
<script>
(function() {
var el = document.getElementById(''qty'');
el && el.addEventListener(''invalid'', function(event) {
if (''validity'' in el) {
for (var state in el.validity) {
if (state == ''stepMismatch'') { continue; }
if (el.validity[state]) { return true; }
}
event.preventDefault();
el.form.submit();
}
}, true);
})();
</script>
</body>
</html>
Bueno, en primer lugar gracias por esta pregunta tan interesante. He aprendido mucho sobre la validación de HTML5 buscando una solución a su problema.
Mi investigación me llevó a descubrir que la API de validación de formularios HTML5 tiene un conjunto interesante de propiedades que son de solo lectura, pero muy útiles para hacer lo que quieres.
Mi enfoque para su problema fue agregar primero el atributo novalidate al elemento de formulario, de modo que pueda controlar cuándo activar la validación, luego leer el objeto de validity adjunto a la entrada, así puedo saber exactamente qué errores de validación hay, y si el único error es stepMismatch (esto es lo que provoca la invalidez de números como 199), puedo omitir todo el proceso de validación. De lo contrario, puedo mostrar el comportamiento normal de validación de HTML con el método reportValidity() .
Aquí está el código que se me ocurrió y espero que haga lo que usted quiere:
var form = document.querySelector("form") // Get the form
var input = document.querySelector("#myInput") // Get the input to validate
form.addEventListener("submit", function(e) {
e.preventDefault() // Catch the submit
// Do the magic
if(onlyStepMatters(input.validity)){
form.submit()
}else {
form.reportValidity()
}
})
function onlyStepMatters(validityState) {
return !(
validityState.badInput || validityState.customError || validityState. patternMismatch || validityState.rangeOverflow || validityState.rangeUnderflow || validityState.tooLong || validityState.tooShort || validityState.typeMismatch || validityState.valueMissing
)
/* This is what the object looks like, notice I just skipped the stepMismatch */
/*
{
badInput,
customError,
patternMismatch,
rangeOverflow,
rangeUnderflow,
stepMismatch,
tooLong,
tooShort,
typeMismatch,
valid,
valueMissing,
}
*/
}
<form novalidate>
<input type="number" id="myInput" min="0" max="1000" step = "100" placeholder="Enter a number" required/>
<button type="submit">Send</button>
</form>
Estoy bastante seguro de que este código podría ser refactorizado y ser más conciso basado en la misma lógica, pero no tengo tiempo suficiente para pensar más en ello.
Cualquier comentario constructivo será apreciado.
Espero que esto ayude.
Esta es una función javascript simple que podría ayudarte
donde prev_num es variable global
Esto funcionará para el incremento y decremento tanto
var perv_num=0;
function ax(z)
{
let def;
let mul=10;
let valu;
let valucopy=parseInt(z.value);
let frst;
valucopy=((valucopy+100)%100);
if (parseInt( z.value)<100)
{
document.getElementById("myNumber").value="";
document.getElementById("myNumber").value=100;
}
else if(parseInt( z.value)<perv_num)
{
def=parseInt( z.value.length);
mul=Math.pow(mul,def-1);
frst=(parseInt(z.value[0])*mul);
document.getElementById("myNumber").value="";
document.getElementById("myNumber").value=frst;
}
else if(valucopy ==0)
{
document.getElementById("myNumber").value="";
document.getElementById("myNumber").value=parseInt(z.value)+100;
}
else{
def=parseInt( z.value.length);
mul=Math.pow(mul,def-1);
frst=(parseInt(z.value[0])*mul);
valu=Math.abs( parseInt(z.value)-frst);
valu=100-valu;
var number=(parseInt(z.value)+valu);
document.getElementById("myNumber").value="";
document.getElementById("myNumber").value= number;
}
perv_num=parseInt( z.value);
}
y html es como
<input type="number" id="myNumber" onchange="ax(this)">
fiddle es https://jsfiddle.net/ecpy5gr0/1
He estado jugando un poco con tu código, tratando de lograr esto:
idealmente me gustaría aumentar o disminuir el valor con un valor de 100
... y terminó con un script para:
- Detectar un aumento o disminución de pasos mediante el teclado o el mouse.
- Utilice una variable
remainderpara almacenar el resultado del cálculo:value % 100, - Modificar el parámetro de
stepy elvaluede lainput, - Agregue de nuevo la variable
remaindercuando el evento del teclado o el mouse haya finalizado, y restablezca el parámetro destepa1(necesario para poder enviar).
En este fragmento de trabajo, intente modificar el valor de entrada con las flechas (en el teclado o con el mouse), comenzando con un número no divisible por 100:
var remainder = false;
var stepbefore;
$("[type=''number'']").bind(''keydown mousedown'', function() {
// If keyboard Up or Down arrow keys or mouse left button on the arrows
if (event.keyCode == 38 || event.keyCode == 40 || event.button === 0) {
// If there is already a change running, exit the function
if (remainder !== false) return;
var myStep = this.getAttribute("stepcustom"); // Get my "stepcustom" attribute
remainder = this.value % myStep;
this.value = Math.floor(this.value / myStep) * myStep;
stepbefore = this.step;
this.step = myStep;
}
});
$("[type=''number'']").bind(''keyup mouseup'', function() {
if (remainder !== false) {
this.value = +(this.value) + remainder;
this.step = stepbefore;
remainder = false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<form>
<input type="number" min="100" max="999999" step="1" stepcustom="100" />
<input type="submit" />
</form>
Espero eso ayude.
Intenta usar la función change () ...
<form>
<input type="number" id="number" min="100" max="999999" step="100" />
</form>
$(document).ready(function(){
$("#number").change(function(a){
if ($(this).val() % 100 === 0) {
/* Do something when the number is even */
console.log("EVEN");
} else {
/* Or when it''s odd (isn''t dividable by 100), do ... whatever */
console.log("ODD");
}
})
});
Y lo estaba probando usando bootstrap, como el ejemplo que desea, cuando el usuario haga clic en el valor se convertirá en 200 (de 199), cuando el usuario haga clic en el valor se convertirá en 100
Para cambiar divisible:
if ($(this).val() % 100 === 0) { //Change 100 with what ever you want
No creo que puedas, el step y la validación están estrechamente vinculados . En el futuro, podrá anular las stepUp() y stepDown() para obtener el comportamiento que describe, pero no he investigado si este es un caso de uso previsto para estas cosas. Recomendaría publicar en la lista de correo WHATWG , preguntar específicamente sobre esas funciones y describir su caso de uso.
Para fines prácticos actuales, ¿ha intentado configurar el step=1 y enlazar a un evento de click para capturar? Puedo ver que probablemente haya un problema con la distinción entre clics ''arriba'' y ''abajo'', pero eso podría ser superable. Sin embargo, podría ser más fácil utilizar una entrada de text , establecer el atributo de pattern adecuada e implementar su propio control de giro.
Solo con el paso, pero puede usar el rango y agregar marcas al control deslizante
me gusta
<input type=''range'' min =''0'' max=''50'' step=''1'' name=''slide'' list="settings" onchange="updateTextInput(this.value);">
<datalist id="settings">
<option>15</option>
<option>20</option>
<option>26</option>
<option>36</option>
<option>50</option>
</dataList>
luego use javascript para verificar el valor cercano y configurarlo
<script type="text/javascript">
function updateTextInput(val) {
if(val>1)
document.getElementById(''textInput'').value=15;
if(val>15)
document.getElementById(''textInput'').value=20;
if(val>20)
document.getElementById(''textInput'').value=26;
//...
}
</script>
dentro del "cambio" evento ronda al valor válido más cercano .
$( "[type=''number'']" ).change(function () {
var value = $(this).val());
var newValue = Math.round(value/100)*100
if (newValue < 100) {
newValue = 100;
}
if (newValue > 999999) {
newValue = 999999;
}
if (newValue === value ) {
return;
}
$(this).val(newValue)
})