Ответ 1

Фрагмент кода

Поскольку этот ответ получил большое внимание, вот хороший настраиваемый фрагмент, который я придумал:

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

Использование

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

Подробнее

• defaultText отображается первоначально
• emptyText отображается, когда вход пуст (очищается)
• invalidText отображается, когда в браузере помечен как недействительный (например, если он не является допустимым адресом электронной почты)

Вы можете назначить строку или функцию каждому из трех свойств.

Если вы назначаете функцию, она может принимать ссылку на элемент ввода (DOM node) и должна возвращать строку, которая затем отображается как сообщение об ошибке.

Совместимость

Протестировано:

• Chrome Canary 47.0.2
• IE 11
• Microsoft Edge (с использованием обновленной версии от 28.08.2012)
• Firefox 40.0.3
• Opera 31.0

Старый ответ

Вы можете увидеть старую версию здесь: https://stackoverflow.com/revisions/16069817/6

Ответ 2

Вы можете просто добиться этого, используя атрибут oninvalid, проверить этот демонстрационный код

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

Ответ 3

Попробуйте следующее:

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

Я тестировал это в Chrome и FF, и он работал в обоих браузерах.

Ответ 4

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

Демо:

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

Ответ 5

Человек, я никогда не делал этого в HTML 5, но я попробую. Взгляните на эту скрипку.

Я использовал некоторые события и свойства jQuery, HTML5 и пользовательский атрибут на входном теге (это может вызвать проблемы, если вы попытаетесь выполнить проверку своего кода). Я не тестировал во всех браузерах, но думаю, что это может сработать.

Это код JavaScript проверки поля с помощью 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 : "");
        };
    });
});

Ницца. Вот простая форма 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>

Атрибут requiredmessage - это настраиваемый атрибут, о котором я говорил. Вы можете установить свое сообщение для каждого требуемого поля, потому что jQuery получит от него, когда отобразит сообщение об ошибке. Вам не нужно устанавливать каждое поле прямо на JavaScript, jQuery делает это за вас. Это регулярное выражение кажется прекрасным (по крайней мере, оно блокирует ваш [email protected]! Haha)

Как вы можете видеть на скрипке, я делаю дополнительную проверку формы отправки формы (это тоже происходит с 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;
        }
    }
});

Я надеюсь, что это сработает или поможет вам в любом случае.

Ответ 6

Это хорошо работает для меня:

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

и форму, которую я использую с (усеченным):

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

Ответ 7

Вы можете настроить этот прослушиватель событий на "недопустимый" для всех входов одного и того же типа или только один, в зависимости от того, что вам нужно, и затем настроить правильное сообщение.

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

Вторая часть script, сообщение о действительности будет reset, так как в противном случае невозможно будет отправить форму: например, это предотвратит запуск сообщения, даже если адрес электронной почты был исправлен.

Также вам не нужно настраивать поле ввода по мере необходимости, так как "invalid" будет запущен после того, как вы начнете вводить ввод.

Вот сценарий для этого: http://jsfiddle.net/napy84/U4pB7/2/ Надеюсь, что это поможет!

Ответ 8

Просто нужно получить элемент и использовать метод setCustomValidity.

Пример

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

Ответ 9

Используйте атрибут "title" в каждом теге ввода и напишите на нем сообщение

Ответ 10

вы можете просто использовать атрибут oninvalid = ", с bingding this.setCustomValidity() eventListener!

Вот мои демо-коды! (вы можете запустить его, чтобы проверить!)

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

Ответ 11

Вы можете добавить этот script для отображения собственного сообщения.

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

Для другой проверки, такой как несоответствие шаблона, вы можете добавить дополнительное условие if else

like

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

существуют другие условия достоверности, такие как rangeOverflow, rangeUnderflow, stepMismatch, typeMismatch, valid