Erforderliche benutzerdefinierte Feldvalidierung

Ich habe ein Formular mit vielen Eingabefeldern. Ich habe HTML5-Validierungen gesetzt

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

Wenn ich das Formular abschicke, ohne dieses Textfeld auszufüllen, wird die Standardnachricht wie angezeigt

"Please fill out this field"

Kann mir bitte jemand helfen, diese Nachricht zu bearbeiten?

Ich habe einen Javascript-Code, um ihn zu bearbeiten, aber er funktioniert nicht

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

Benutzerdefinierte Validierungen per E-Mail senden

Ich habe folgendes HTML-Formular

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

Validierungsnachrichten, die ich möchte.

Erforderliches Feld: Bitte E-Mail-Adresse eingeben
Falsche E- Mail-Adresse : 'testing @ .com' ist keine gültige E-Mail-Adresse. ( hier eingegebene E-Mail-Adresse im Textfeld angezeigt )

Ich habe es versucht.

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

Diese Funktion funktioniert nicht richtig. Haben Sie eine andere Möglichkeit, dies zu tun? Es wäre dankbar.

Code-Auszug

Da diese Antwort sehr viel Beachtung fand, ist hier ein schönes konfigurierbares Snippet, das ich mir ausgedacht habe:

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

Verwendung

→ 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!';
  }
});

Mehr Details

• defaultText wird zunächst angezeigt
• emptyText wird angezeigt, wenn die Eingabe leer ist (wurde gelöscht)
• invalidText wird angezeigt, wenn die Eingabe vom Browser als ungültig markiert wird (z. B. wenn es sich nicht um eine gültige E-Mail-Adresse handelt).

Sie können jeder der drei Eigenschaften entweder eine Zeichenfolge oder eine Funktion zuweisen.
Wenn Sie eine Funktion zuweisen, kann sie einen Verweis auf das Eingabeelement (DOM-Knoten) akzeptieren und muss eine Zeichenfolge zurückgeben, die dann als Fehlermeldung angezeigt wird.

Kompatibilität

Getestet in:

• Chrome Canary 47.0.2
• IE 11
• Microsoft Edge (mit der aktuellen Version vom 28.08.2015)
• Firefox 40.0.3
• Opera 31.0

Alte Antwort

Sie können die alte Version hier sehen: https://stackoverflow.com/revisions/16069817/6

Sie können dies einfach mit einem ungültigen Attribut erreichen. Überprüfen Sie diesen Demo-Code

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

Versuche dies:

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

Ich habe dies in Chrome und FF getestet und es hat in beiden Browsern funktioniert.

Mann, das habe ich in HTML 5 noch nie gemacht, aber ich werde es versuchen. Schauen Sie sich diese Geige an.

Ich habe einige native jQuery-, HTML5-Ereignisse und -Eigenschaften sowie ein benutzerdefiniertes Attribut für das Eingabe-Tag verwendet (dies kann zu Problemen führen, wenn Sie versuchen, Ihren Code zu validieren). Ich habe nicht in allen Browsern getestet, aber ich denke, es könnte funktionieren.

Dies ist der JavaScript-Code für die Feldvalidierung mit 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 : "");
        };
    });
});

Nett. Hier ist die einfache Form 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>

Das Attribut requiredmessageist das benutzerdefinierte Attribut, über das ich gesprochen habe. Sie können Ihre Nachricht für jedes erforderliche Feld dort festlegen, da jQuery von ihr abgerufen wird, wenn die Fehlermeldung angezeigt wird. Sie müssen nicht jedes Feld in JavaScript richtig einstellen, jQuery erledigt dies für Sie. Dieser Regex scheint in Ordnung zu sein (zumindest blockiert er deine testing@.com! Haha)

Wie Sie auf der Geige sehen können, mache ich eine zusätzliche Validierung des Ereignisses für das Senden des Formulars ( dies gilt auch für 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;
        }
    }
});

Ich hoffe das funktioniert oder hilft dir trotzdem.

Das funktioniert gut für mich:

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

und das Formular, mit dem ich es verwende (abgeschnitten):

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

Sie können dies tun, indem Sie einen Ereignis-Listener für "ungültig" für alle Eingänge desselben Typs oder nur einen einrichten, je nachdem, was Sie benötigen, und dann die richtige Nachricht einrichten.

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

Im zweiten Teil des Skripts wird die Gültigkeitsnachricht zurückgesetzt, da das Formular sonst nicht gesendet werden kann. Dies verhindert beispielsweise, dass die Nachricht ausgelöst wird, selbst wenn die E-Mail-Adresse korrigiert wurde.

Außerdem müssen Sie das Eingabefeld nicht wie erforderlich einrichten, da "ungültig" ausgelöst wird, sobald Sie mit der Eingabe der Eingabe beginnen.

Hier ist eine Geige dafür: http://jsfiddle.net/napy84/U4pB7/2/ Hoffe, das hilft!

Verwenden Sie das Attribut "title" in jedem Eingabe-Tag und schreiben Sie eine Nachricht darauf

Sie müssen nur das Element abrufen und die Methode setCustomValidity verwenden.

Beispiel

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

Sie können einfach das Attribut oninvalid = "verwenden , wobei der this.setCustomValidity () eventListener!

Hier sind meine Demo-Codes! (Sie können sie zum Auschecken ausführen!)

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

Referenzlink

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

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

Sie können dieses Skript hinzufügen, um Ihre eigene Nachricht anzuzeigen.

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

Für andere Überprüfungen wie Musterfehlanpassungen können Sie zusätzliche if-Bedingungen hinzufügen

mögen

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

Es gibt andere Gültigkeitsbedingungen wie rangeOverflow, rangeUnderflow, stepMismatch, typeMismatch, valid