Validação personalizada de campo necessária

Tenho um formulário com muitos campos de entrada. Eu coloquei validações html5

<input type="text" name="topicName" id="topicName" required />

quando eu envio o formulário sem preencher esta caixa de texto, ele mostra a mensagem padrão como

"Please fill out this field"

Alguém pode me ajudar a editar esta mensagem?

Eu tenho um código javascript para editá-lo, mas não está funcionando

$(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("");
        };
    }
})

Validações personalizadas de email

Eu tenho o seguinte formulário HTML

<form id="myform">
    <input id="email" name="email" type="email" />
    <input type="submit" />
</form>

Mensagens de validação que eu quero gostar.

Campo obrigatório: Digite o endereço de
e-mail E-mail incorreto: 'testing @ .com' não é um endereço de e-mail válido. ( aqui, endereço de e-mail inserido exibido na caixa de texto )

Eu tentei isso

function check(input) {  
    if(input.validity.typeMismatch){  
        input.setCustomValidity("'" + input.value + "' is not a Valid Email Address.");  
    }  
    else {  
        input.setCustomValidity("");  
    }                 
}  

Esta função não está funcionando corretamente. Existe alguma outra maneira de fazer isso? Isso seria apreciado.

Fragmento de código

Uma vez que esta resposta chamou muita atenção, aqui está um bom snippet configurável que eu criei:

/**
  * @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!';
  }
});

Mais detalhes

• defaultText é exibido inicialmente
• emptyText é exibido quando a entrada está vazia (foi apagada)
• invalidText é exibido quando a entrada é marcada como inválida pelo navegador (por exemplo, quando não é um endereço de e-mail válido)

Você pode atribuir uma string ou uma função a cada uma das três propriedades.
Se você atribuir uma função, ela pode aceitar uma referência ao elemento de entrada (nó DOM) e deve retornar uma string que é exibida como a mensagem de erro.

Compatibilidade

Testado em:

• Chrome Canary 47.0.2
• IE 11
• Microsoft Edge (usando a versão atualizada em 28/08/2015)
• Firefox 40.0.3
• Opera 31.0

Resposta antiga

Você pode ver a revisão antiga aqui: https://stackoverflow.com/revisions/16069817/6

Você pode simplesmente conseguir isso usando o atributo oninvalid, verifique este código de demonstração

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

Codepen Demo: 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;
}

Demo:

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

Experimente isto:

$(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");
        };
    }
})

Eu testei isso no Chrome e FF e funcionou em ambos os navegadores.

Cara, eu nunca fiz isso em HTML 5 mas vou tentar. Dê uma olhada neste violino.

Usei alguns jQuery, eventos e propriedades nativos de HTML5 e um atributo personalizado na tag de entrada (isso pode causar problemas se você tentar validar seu código). Não testei em todos os navegadores, mas acho que pode funcionar.

Este é o código JavaScript de validação de campo com 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 : "");
        };
    });
});

Agradável. Aqui está o formulário simples 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>

O atributo requiredmessageé o atributo personalizado de que falei. Você pode definir sua mensagem para cada campo obrigatório, pois o jQuery obterá dele quando exibir a mensagem de erro. Você não precisa definir cada campo diretamente no JavaScript, o jQuery faz isso por você. Essa regex parece estar bem (pelo menos bloqueia seu [email protected]! Haha)

Como você pode ver no fiddle, eu faço uma validação extra do evento de formulário de envio ( isso vai para document.ready também ):

$("#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 isso funcione ou ajude de alguma forma.

Isto funciona bem para mim:

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.");
                }
            }
        }
    }
});

e a forma que estou usando (truncada):

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

Você pode fazer isso configurando um ouvinte de evento para o 'inválido' em todas as entradas do mesmo tipo, ou apenas uma, dependendo do que você precisa e, em seguida, configurando a mensagem apropriada.

[].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);
    });

Na segunda parte do script, a mensagem de validade será zerada, caso contrário não será possível enviar o formulário: por exemplo, isso evita que a mensagem seja disparada mesmo que o endereço de e-mail tenha sido corrigido.

Além disso, você não precisa configurar o campo de entrada conforme necessário, pois o 'inválido' será acionado assim que você começar a digitar a entrada.

Aqui está um violino para isso: http://jsfiddle.net/napy84/U4pB7/2/ Espero que ajude!

Use o atributo "título" em cada tag de entrada e escreva uma mensagem nela

Só precisa pegar o elemento e usar o método setCustomValidity.

Exemplo

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

você pode simplesmente usar o atributo oninvalid = " , com o bingding de this.setCustomValidity () eventListener!

Aqui estão meus códigos de demonstração! (Você pode executá-los para conferir!)

<!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 referência

http://caniuse.com/#feat=form-validation

https://www.w3.org/TR/html51/sec-forms.html#sec-constraint-validation

Você pode adicionar este script para mostrar sua própria mensagem.

 <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 outra validação, como incompatibilidade de padrão, você pode adicionar outra condição adicional

gostar

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

existem outras condições de validade como rangeOverflow, rangeUnderflow, stepMismatch, typeMismatch, válido