javascript - validacion - Establecer un mensaje de validación de campo requerido de HTML5 personalizado
validar formulario html5 (11)
Fragmento de código
Como esta respuesta recibió mucha atención, he aquí un buen fragmento configurable que se me ocurrió:
/**
* @author ComFreek <https://stackoverflow.com/users/603003/comfreek>
* @link https://stackoverflow.com/a/16069817/603003
* @license MIT 2013-2015 ComFreek
* @license[dual licensed] CC BY-SA 3.0 2013-2015 ComFreek
* You MUST retain this license header!
*/
(function (exports) {
function valOrFunction(val, ctx, args) {
if (typeof val == "function") {
return val.apply(ctx, args);
} else {
return val;
}
}
function InvalidInputHelper(input, options) {
input.setCustomValidity(valOrFunction(options.defaultText, window, [input]));
function changeOrInput() {
if (input.value == "") {
input.setCustomValidity(valOrFunction(options.emptyText, window, [input]));
} else {
input.setCustomValidity("");
}
}
function invalid() {
if (input.value == "") {
input.setCustomValidity(valOrFunction(options.emptyText, window, [input]));
} else {
input.setCustomValidity(valOrFunction(options.invalidText, window, [input]));
}
}
input.addEventListener("change", changeOrInput);
input.addEventListener("input", changeOrInput);
input.addEventListener("invalid", invalid);
}
exports.InvalidInputHelper = InvalidInputHelper;
})(window);
Uso
→ jsFiddle
<input id="email" type="email" required="required" />
InvalidInputHelper(document.getElementById("email"), {
defaultText: "Please enter an email address!",
emptyText: "Please enter an email address!",
invalidText: function (input) {
return ''The email address "'' + input.value + ''" is invalid!'';
}
});
Más detalles
-
defaultTextse muestra inicialmente -
emptyTextaparece cuando la entrada está vacía (se borró) -
invalidTextaparece cuando el navegador marca la entrada como no válida (por ejemplo, cuando no es una dirección de correo electrónico válida)
Puede asignar una cadena o una función a cada una de las tres propiedades.
Si asigna una función, puede aceptar una referencia al elemento de entrada (nodo DOM) y debe devolver una cadena que luego se muestra como el mensaje de error.
Compatibilidad
Probado en:
- Chrome Canary 47.0.2
- IE 11
- Microsoft Edge (utilizando la versión actualizada al 28/08/2015)
- Firefox 40.0.3
- Opera 31.0
Respuesta anterior
Puede ver la revisión anterior aquí: https://stackoverflow.com/revisions/16069817/6
Validación personalizada de campo requerida
Tengo un formulario con muchos campos de entrada. He puesto validaciones html5
<input type="text" name="topicName" id="topicName" required />
cuando envío el formulario sin llenar este cuadro de texto, muestra un mensaje predeterminado como
"Please fill out this field"
¿Puede alguien ayudarme a editar este mensaje?
Tengo un código de JavaScript para editarlo, pero no funciona
$(document).ready(function() {
var elements = document.getElementsByName("topicName");
for (var i = 0; i < elements.length; i++) {
elements[i].oninvalid = function(e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
e.target.setCustomValidity("Please enter Room Topic Title");
}
};
elements[i].oninput = function(e) {
e.target.setCustomValidity("");
};
}
})
Correo electrónico de validaciones personalizadas
Tengo el siguiente formulario HTML
<form id="myform">
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Mensajes de validación que quiero.
Campo obligatorio: ingrese la dirección de correo electrónico
Correo electrónico incorrecto: ''testing @ .com'' no es una dirección de correo electrónico válida. ( aquí, la dirección de correo electrónico ingresada se muestra en el cuadro de texto )
He intentado esto.
function check(input) {
if(input.validity.typeMismatch){
input.setCustomValidity("''" + input.value + "'' is not a Valid Email Address.");
}
else {
input.setCustomValidity("");
}
}
Esta función no funciona correctamente. ¿Tiene alguna otra forma de hacer esto? Será apreciado.
Esto funciona bien para mi:
jQuery(document).ready(function($) {
var intputElements = document.getElementsByTagName("INPUT");
for (var i = 0; i < intputElements.length; i++) {
intputElements[i].oninvalid = function (e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
if (e.target.name == "email") {
e.target.setCustomValidity("Please enter a valid email address.");
} else {
e.target.setCustomValidity("Please enter a password.");
}
}
}
}
});
y el formulario con el que lo estoy usando (truncado):
<form id="welcome-popup-form" action="authentication" method="POST">
<input type="hidden" name="signup" value="1">
<input type="email" name="email" id="welcome-email" placeholder="Email" required></div>
<input type="password" name="passwd" id="welcome-passwd" placeholder="Password" required>
<input type="submit" id="submitSignup" name="signup" value="SUBMIT" />
</form>
Hombre, nunca he hecho eso en HTML 5, pero lo intentaré. Echa un vistazo a este violín.
He usado algunos jQuery, eventos y propiedades nativos de HTML5 y un atributo personalizado en la etiqueta de entrada (esto puede causar problemas si intenta validar su código). No probé en todos los navegadores, pero creo que puede funcionar.
Este es el código de JavaScript de validación de campo con jQuery:
$(document).ready(function()
{
$(''input[required], input[required="required"]'').each(function(i, e)
{
e.oninput = function(el)
{
el.target.setCustomValidity("");
if (el.target.type == "email")
{
if (el.target.validity.patternMismatch)
{
el.target.setCustomValidity("E-mail format invalid.");
if (el.target.validity.typeMismatch)
{
el.target.setCustomValidity("An e-mail address must be given.");
}
}
}
};
e.oninvalid = function(el)
{
el.target.setCustomValidity(!el.target.validity.valid ? e.attributes.requiredmessage.value : "");
};
});
});
Bonito. Aquí está la forma simple html:
<form method="post" action="" id="validation">
<input type="text" id="name" name="name" required="required" requiredmessage="Name is required." />
<input type="email" id="email" name="email" required="required" requiredmessage="A valid E-mail address is required." pattern="^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9]+$" />
<input type="submit" value="Send it!" />
</form>
El atributo requiredmessage es el atributo personalizado del que hablé. Puede configurar su mensaje para cada campo requerido allí, porque jQuery lo obtendrá cuando muestre el mensaje de error. No tiene que configurar cada campo directamente en JavaScript, jQuery lo hace por usted. Esa expresión regular parece estar bien (al menos bloquea tu [email protected] ! Jaja)
Como puede ver en el violín, hago una validación adicional del evento de formulario de envío ( esto también lo hace en document.ready ):
$("#validation").on("submit", function(e)
{
for (var i = 0; i < e.target.length; i++)
{
if (!e.target[i].validity.valid)
{
window.alert(e.target.attributes.requiredmessage.value);
e.target.focus();
return false;
}
}
});
Espero que esto funcione o te ayude de todos modos.
Prueba esto:
$(function() {
var elements = document.getElementsByName("topicName");
for (var i = 0; i < elements.length; i++) {
elements[i].oninvalid = function(e) {
e.target.setCustomValidity("Please enter Room Topic Title");
};
}
})
Probé esto en Chrome y FF y funcionó en ambos buscadores.
Puede agregar esta secuencia de comandos para mostrar su propio mensaje.
<script>
input = document.getElementById("topicName");
input.addEventListener(''invalid'', function (e) {
if(input.validity.valueMissing)
{
e.target.setCustomValidity("Please enter topic name");
}
//To Remove the sticky error message at end write
input.addEventListener(''input'', function (e) {
e.target.setCustomValidity('''');
});
});
</script>
Para otras validaciones, como la discrepancia de patrones, puede agregar una condición adicional, si no
me gusta
else if (input.validity.patternMismatch)
{
e.target.setCustomValidity("Your Message");
}
hay otras condiciones de validez como rangeOverflow, rangeUnderflow, stepMismatch, typeMismatch, válido
Puedes hacer esto configurando un detector de eventos para el "inválido" en todas las entradas del mismo tipo, o solo una, dependiendo de lo que necesites, y luego configurando el mensaje apropiado.
[].forEach.call( document.querySelectorAll(''[type="email"]''), function(emailElement) {
emailElement.addEventListener(''invalid'', function() {
var message = this.value + ''is not a valid email address'';
emailElement.setCustomValidity(message)
}, false);
emailElement.addEventListener(''input'', function() {
try{emailElement.setCustomValidity('''')}catch(e){}
}, false);
});
La segunda parte del script, el mensaje de validez se restablecerá, ya que de lo contrario no será posible enviar el formulario: por ejemplo, esto evitará que el mensaje se active incluso cuando se haya corregido la dirección de correo electrónico.
Además, no tiene que configurar el campo de entrada como sea necesario, ya que el ''no válido'' se activará una vez que comience a escribir en la entrada.
Aquí hay un violín para eso: http://jsfiddle.net/napy84/U4pB7/2/ Espero que ayude!
Simplemente puede lograr esto utilizando el atributo oninvalid, revise este código de demostración
<form>
<input type="email" pattern="[^@]*@[^@]" required oninvalid="this.setCustomValidity(''Put here custom message'')"/>
<input type="submit"/>
</form>
Utilice el atributo "título" en cada etiqueta de entrada y escriba un mensaje en él
simplemente puede usar el atributo oninvalid = " , con el bingding this.setCustomValidity () eventListener!
¡Aquí están mis códigos de demostración! (¡Puedes ejecutarlo para verlo!)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>oninvalid</title>
</head>
<body>
<form action="https://www.google.com.hk/webhp?#safe=strict&q=" method="post" >
<input type="email" placeholder="[email protected]" required="" autocomplete="" autofocus="" oninvalid="this.setCustomValidity(`This is a customlised invalid warning info!`)">
<input type="submit" value="Submit">
</form>
</body>
</html>
Link de referencia
http://caniuse.com/#feat=form-validation
https://www.w3.org/TR/html51/sec-forms.html#sec-constraint-validation
HTML:
<form id="myform">
<input id="email" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);" type="email" required="required" />
<input type="submit" />
</form>
JAVASCRIPT:
function InvalidMsg(textbox) {
if (textbox.value == '''') {
textbox.setCustomValidity(''Required email address'');
}
else if (textbox.validity.typeMismatch){{
textbox.setCustomValidity(''please enter a valid email address'');
}
else {
textbox.setCustomValidity('''');
}
return true;
}
Demo:
Solo necesita obtener el elemento y usar el método setCustomValidity.
Ejemplo
var foo = document.getElementById(''foo'');
foo.setCustomValidity('' An error occurred'');