Validación personalizada de campo obligatorio

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"

¿Alguien puede ayudarme a editar este mensaje?

Tengo un código 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("");
        };
    }
})

Validaciones personalizadas por correo electrónico

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 como.

Campo obligatorio: Introduzca 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 probado 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 hacerlo? Será apreciado.

Fragmento de código

Dado que esta respuesta llamó mucho la atención, aquí hay 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

• defaultText se muestra inicialmente
• emptyText se muestra cuando la entrada está vacía (se borró)
• invalidText se muestra 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 (usando la versión actualizada al 28/08/2015)
• Firefox 40.0.3
• Opera 31.0

Respuesta antigua

Puede ver la revisión anterior aquí: https://stackoverflow.com/revisions/16069817/6

Simplemente puede lograr esto usando un atributo no válido, consulte este código de demostración

<form>
<input type="email" pattern="[^@]*@[^@]" required oninvalid="this.setCustomValidity('Put  here custom message')"/>
<input type="submit"/>
</form>

Demostración de Codepen: https://codepen.io/akshaykhale1992/pen/yLNvOqP

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;
}

Demostración:

http://jsfiddle.net/patelriki13/Sqq8e/

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 navegadores.

Hombre, nunca he hecho eso en HTML 5, pero lo intentaré. Eche un vistazo a este violín.

He usado algunos eventos y propiedades nativos de jQuery, 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 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 : "");
        };
    });
});

Agradable. Aquí está el formato html simple:

<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 requiredmessagees el atributo personalizado del que hablé. Puede configurar su mensaje para cada campo requerido allí porque jQuery obtendrá de él 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 va 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.

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>

Puede hacer esto configurando un detector de eventos para los 'no válidos' en todas las entradas del mismo tipo, o solo una, según lo que necesite, y luego configurando el mensaje adecuado.

[].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 evita que el mensaje se active incluso cuando la dirección de correo electrónico haya sido corregida.

Además, no es necesario que configure el campo de entrada como se requiere, ya que el 'inválido' se activará una vez que comience a escribir la entrada.

Aquí hay un violín para eso: http://jsfiddle.net/napy84/U4pB7/2/ ¡ Espero que ayude!

Utilice el atributo "título" en cada etiqueta de entrada y escriba un mensaje en él.

Solo necesita obtener el elemento y usar el método setCustomValidity.

Ejemplo

var foo = document.getElementById('foo');
foo.setCustomValidity(' An error occurred');

simplemente puede usar el atributo oninvalid = " , con el bingding this.setCustomValidity () eventListener!

Aquí están mis códigos de demostración (¡puede ejecutarlos para verificar!)

<!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

Puede agregar este script 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 falta de coincidencia de patrones, puede agregar una condición adicional if else

me gusta

else if (input.validity.patternMismatch) 
{
  e.target.setCustomValidity("Your Message");
}

hay otras condiciones de validez como rangeOverflow, rangeUnderflow, stepMismatch, typeMismatch, valid