Convalida personalizzata del campo obbligatorio

Ho un modulo con molti campi di input. Ho messo convalide html5

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

quando invio il modulo senza riempire questa casella di testo, viene visualizzato un messaggio predefinito come

"Please fill out this field"

Qualcuno può aiutarmi a modificare questo messaggio?

Ho un codice javascript per modificarlo, ma non funziona

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

Email di convalida personalizzate

Ho il seguente modulo HTML

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

Messaggi di convalida che desidero.

Campo obbligatorio: inserire l'indirizzo e-mail E-
mail errata: "testing @ .com" non è un indirizzo e-mail valido. ( qui, indirizzo email inserito visualizzato nella casella di testo )

L'ho provato.

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

Questa funzione non funziona correttamente, hai altri modi per farlo? Sarebbe apprezzato.

Snippet di codice

Poiché questa risposta ha ricevuto molta attenzione, ecco un bel frammento configurabile che ho creato:

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

Più dettagli

• defaultText viene visualizzato inizialmente
• emptyText viene visualizzato quando l'ingresso è vuoto (è stato cancellato)
• invalidText viene visualizzato quando l'input è contrassegnato come non valido dal browser (ad esempio quando non è un indirizzo email valido)

È possibile assegnare una stringa o una funzione a ciascuna delle tre proprietà.
Se si assegna una funzione, può accettare un riferimento all'elemento di input (nodo DOM) e deve restituire una stringa che viene quindi visualizzata come messaggio di errore.

Compatibilità

Testato in:

• Chrome Canary 47.0.2
• IE 11
• Microsoft Edge (utilizzando la versione aggiornata al 28/08/2015)
• Firefox 40.0.3
• Opera 31.0

Vecchia risposta

Puoi vedere la vecchia revisione qui: https://stackoverflow.com/revisions/16069817/6

Puoi semplicemente ottenere questo risultato utilizzando l'attributo oninvalid, controlla questo codice demo

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

Prova questo:

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

L'ho testato in Chrome e FF e ha funzionato in entrambi i browser.

Amico, non l'ho mai fatto in HTML 5 ma ci proverò. Dai un'occhiata a questo violino.

Ho usato alcuni eventi e proprietà nativi jQuery, HTML5 e un attributo personalizzato sul tag di input (questo potrebbe causare problemi se provi a convalidare il tuo codice). Non l'ho testato in tutti i browser ma penso che possa funzionare.

Questo è il codice JavaScript di convalida del 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 : "");
        };
    });
});

Bello. Ecco il semplice modulo 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>

L'attributo requiredmessageè l'attributo personalizzato di cui ho parlato. Puoi impostare il tuo messaggio per ogni campo richiesto perché jQuery riceverà da esso quando visualizzerà il messaggio di errore. Non devi impostare ogni campo correttamente su JavaScript, jQuery lo fa per te. Quella regex sembra andare bene (almeno ti blocca testing@.com! Haha)

Come puoi vedere su fiddle, faccio un'ulteriore convalida dell'evento submit form ( questo vale anche per 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;
        }
    }
});

Spero che questo funzioni o ti aiuti comunque.

Questo funziona bene per me:

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 il modulo con cui lo sto usando (troncato):

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

Puoi farlo impostando un listener di eventi per "non valido" su tutti gli ingressi dello stesso tipo, o solo uno, a seconda di ciò di cui hai bisogno, e quindi impostando il messaggio corretto.

[].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 seconda parte dello script, il messaggio di validità verrà azzerato, altrimenti non sarà possibile inviare il form: questo ad esempio impedisce che il messaggio venga attivato anche quando l'indirizzo email è stato corretto.

Inoltre non è necessario impostare il campo di input come richiesto, poiché "non valido" verrà attivato una volta che inizi a digitare l'input.

Ecco un violino per questo: http://jsfiddle.net/napy84/U4pB7/2/ Spero che aiuti!

Usa l'attributo "titolo" in ogni tag di input e scrivi un messaggio su di esso

Ho solo bisogno di ottenere l'elemento e utilizzare il metodo setCustomValidity.

Esempio

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

puoi semplicemente usare l' attributo oninvalid = " , con l'aggiunta di this.setCustomValidity () eventListener!

Ecco i miei codici demo! (Puoi eseguirlo per verificare!)

<!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="xgqfrms@email.xyz" required="" autocomplete="" autofocus="" oninvalid="this.setCustomValidity(`This is a customlised invalid warning info!`)">
        <input type="submit" value="Submit">
    </form>
</body>
</html>

link di riferimento

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

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

Puoi aggiungere questo script per mostrare il tuo messaggio.

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

Per altre convalide come la mancata corrispondenza del modello, è possibile aggiungere una condizione if else aggiuntiva

piace

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

ci sono altre condizioni di validità come rangeOverflow, rangeUnderflow, stepMismatch, typeMismatch, valid