HTML5, cómo forzar la validación del patrón de entrada en el cambio de valor?

Question

Estoy tratando de aprender HTML5 y encontré lo siguiente. Me gustaría usar la palabra clave de entrada pattern para validar la entrada a medida que el usuario la escribe (por ejemplo, validación después de presionar la pestaña o cambiar el enfoque desde el cuadro de entrada).

He intentado lo siguiente:

<input name="variable" value="" tabindex="1" maxlength="13" required="required" pattern="${expectedValue}" onchange="this.variable.validate()" /> </li> 

Y así:

<input name="variable" value="" tabindex="1" maxlength="13" required="required" pattern="${expectedValue}" /> </li> 

que componen el código para

onchange="this.variable.validate()" 

Cómo activar la validación de cambio de valor? Solo puedo hacer esto onSubmit.

Answer 1

¿Has echado un vistazo a las funciones 'onkey' de javascript?

onkeyup puede ser el que está buscando si quiere algo a medida que el usuario escribe.

Además, onchange aparece cuando el campo pierde el foco, mientras que onkeyup se activa a medida que el usuario escribe. Depende de lo que necesites.

Usted que muchos quieren probar algo como esto:

onchange = variable.validate(this.value)

Answer 2

que puedes usar keyup, el enfoque y la función de toma para poner en práctica su necesidad. Por ejemplo:

tiene campo de entrada de contraseña:

<input id="pswd" type="password" required name="pswd" />

en el código JavaScript:

$('input[type=password]').keyup(function() { 
// keyup event code here with validation rules }); 

$('input[type=password]').focus(function() { 
// focus code here to show message which contains rules for input field }); 

$('input[type=password]').blur(function() { 
// blur code here }); 

Answer 3

_{responsabilidad:
Todo lo que voy a decir aquí que funciona para todos los navegadores modernos. El término "navegador moderno" en este contexto excluye IE9 y anteriores. También Safari para Windows tiene soporte solo parcial.}

Si todo lo que necesita es un indicador de estilo, se puede usar CSS puro para esto:

input[pattern]:invalid{ 
    color:red; 
} 

Cuando se utiliza el patrón, la validación onsubmit se realiza automáticamente por el navegador (no funciona en Safari para Windows).

Answer 4

Si desea utilizar jQuery para acondicionarlo la funcionalidad patrón para navegadores antiguos como Internet Explorer 8, se podría hacer algo como:

// Jquery Function to Validate Patterns on Input Objects 
(function($){ 
    $.fn.validatePattern = function(search) { 
     // Get the current element's siblings 
     var pattern = this.attr('pattern'); 
     var value = this.val(); 

     return !(pattern&&(value.length>0)&&!value.match(new RegExp('^'+pattern+'$'))); 
    }; 
})(jQuery); 

$(document).ready(function() { 
    // Bind pattern checking (invalid) to on change 
    $(':input').change(function() { 
     if (!$(this).validatePattern()) { 
      $(this).addClass('invalidPattern'); 
     } 
    }); 
    // Bind pattern valid to keyUp 
    $(':input').keyUp(function() { 
     if ($(this).validatePattern()) { 
      $(this).removeClass('invalidPattern'); 
     } 
    }); 
}); 

Esto agregará el invalidPattern clase de objetos de entrada que tienen un patrón y hacen no coincide. También es posible que desee agregar los cheques necesarios, etc. y enviar cheques para el formulario para evitar el envío si los patrones no se validan. Lo que pongo arriba es un script rápido y ligero para validar solo el patrón.

Para un calce más plenamente funcional, un vistazo a http://adodson.com/jquery.form.js/

El código de validación es el patrón de ese proyecto.

Answer 5

hei ~ Yo sé lo que quiere ~~ Utilice esta reportValidity()

$('#test').on('input',function (e) { 
    e.target.setCustomValidity('') 
if ($(this).val()>3) { 
    console.log('o~~~~error'); 
    this.setCustomValidity('123') 
    // this.checkValidity() 
    this.reportValidity(); 
} 

entonces cuando la entrada #test es más grande que 3 hay un estallido consejos de auto

$('#test').on('input', function(e) { 
 
    this.setCustomValidity('') 
 
    if ($(this).val() > 3) { 
 
     this.setCustomValidity('wooo~~~~') 
 
    } 
 
    // e.target.checkValidity() 
 
    this.reportValidity(); 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input autofocus id='test' type="text" min="1" pattern="[0-9]+" required> 
 
<!-- <button type="submit">submit</button> --> 
 
</form>

https://html.spec.whatwg.org/#dom-cva-reportvalidity

Answer 6

El siguiente código jQuery forzará la validación cada vez que se cambie la entrada.

intercepta el oninput event en los elementos <input...>. Si el valor no es válido después del evento, el cambio se deshace y se restablece el valor original. También maneja situaciones donde el valor inválido ha sido pegado en el campo.

El data() function almacena y recupera cualquier dato al elemento utilizando el HTML5 data-attribute. La función almacena el valor original en el elemento data-last-valid.

<script lang="text/javascript"> 
    // First "input" means event type `oninput`, second "input" is the CSS selector. 
    // So read as "for all <input ...> elements set the event handler 
    // for the "oninput" event to the function... 
    $(document).on("input", "input", function (event) { 
     if (this.checkValidity()) { 
      // Store the current valid value for future use 
      $(this).data('last-valid', this.value); 
     } 
     else { 
      // Undo the change using the stored last valid value 
      this.value = $(this).data('last-valid') || ""; 
     } 
    }); 
</script>