it-swarm.com.de

Legen Sie die für HTML5 erforderliche Feldüberprüfungsnachricht fest

Erforderliches Feld für benutzerdefinierte Validierung

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 eine Standardnachricht wie angezeigt

"Please fill out this field"

Kann mir 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 Überprüfungen per E-Mail

Ich habe folgendes HTML-Formular

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


Validierungsnachrichten, die ich mag.

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

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 sehr dankbar.

109
Sumit Bijvani

Code-Auszug

Da diese Antwort viel Beachtung fand, ist hier ein konfigurierbares Nizza-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);

Verwendungszweck

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 anfangs 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 diese einen Verweis auf das Eingabeelement (DOM-Knoten) akzeptieren und muss einen String zurückgeben, der 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

115
ComFreek

Sie können dies einfach erreichen, indem Sie ein ungültiges Attribut verwenden. Schauen Sie sich diesen Demo-Code an

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

enter image description here

49
Akshay Khale

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/

17
Rikin Patel

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 funktionierte in beiden Browsern.

16
Levi Botelho

Mann, ich habe das noch nie in HTML 5 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 Feldvalidierungs-JavaScript-Code 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 das einfache Formular 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_.-][email protected][a-zA-Z0-9-]+.[a-zA-Z0-9]+$" />

    <input type="submit" value="Send it!" />
</form>

Das Attribut requiredmessage ist das benutzerdefinierte Attribut, über das ich gesprochen habe. Sie können Ihre Nachricht für jedes erforderliche Feld festlegen, da jQuery von diesem Feld abgerufen wird, wenn die Fehlermeldung angezeigt wird. Sie müssen nicht jedes Feld in JavaScript richtig einstellen, jQuery erledigt dies für Sie. Dieser reguläre Ausdruck scheint in Ordnung zu sein (zumindest blockiert er Ihr [email protected]! Haha)

Wie Sie auf Fiddle sehen können, führe ich eine zusätzliche Validierung des Submit Form-Ereignisses durch (, 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 klappt oder hilft dir trotzdem weiter.

8
DontVoteMeDown

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

enter image description here

6
davidcondrey

Auf diese Weise können Sie einen Ereignis-Listener für "ungültig" über alle Eingaben desselben Typs oder nur eine, je nach Bedarf, einrichten und anschließend 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);
    });

Der zweite Teil des Skripts, die Gültigkeitsnachricht, wird zurückgesetzt, da sonst das Senden des Formulars nicht möglich ist. Dadurch wird beispielsweise verhindert, dass die Nachricht auch dann ausgelöst wird, wenn die E-Mail-Adresse korrigiert wurde.

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

Hier ist ein Trick dafür: http://jsfiddle.net/napy84/U4pB7/2/ Hoffe das hilft!

5
Mimo

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

Beispiel

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

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

4
iglesiasedd

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

Hier sind meine Demo-Codes! (Sie können es zum Auschecken ausführen!) enter image description here

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

referenzlink

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

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

3
xgqfrms

Sie können dieses Skript zum Anzeigen Ihrer eigenen Nachricht hinzufügen.

 <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 Musterinkongruenzen können Sie zusätzliche 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

1
Engineer