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

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

попробуйте это:

$(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, и он работал в обоих браузерах.

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/

человек, я никогда не делал этого в 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_.-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9]+$" />

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

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

как вы можете видеть на скрипке, я делаю дополнительную проверку события submit формы(это идет на документе.готовый тоже):

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

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

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

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>

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

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

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

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

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

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

пример

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

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

вы можете просто использовать oninvalid=" атрибут, с bingding этого.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>

ссылка ссылка

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

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

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

 <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

как

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

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