Обязательное поле настраиваемой проверки

У меня одна форма с множеством полей ввода. Я поставил проверки html5

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

когда я отправляю форму, не заполняя это текстовое поле, отображается сообщение по умолчанию, например

"Please fill out this field"

Может ли кто-нибудь помочь мне отредактировать это сообщение?

У меня есть код javascript для его редактирования, но он не работает

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

Электронная почта пользовательских проверок

У меня следующая HTML-форма

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

Сообщения проверки, которые мне нужны.

Обязательное поле: Пожалуйста, введите адрес
электронной почты Неверный адрес электронной почты: "testing @ .com" не является действительным адресом электронной почты. ( здесь введенный адрес электронной почты отображается в текстовом поле )

Я пробовал это.

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

Эта функция не работает должным образом. У вас есть другой способ сделать это? Было бы признательно.

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

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

/**
  * @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) и должна возвращать строку, которая затем отображается как сообщение об ошибке.

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

Проверено в:

• Chrome Canary 47.0.2
• IE 11
• Microsoft Edge (используется актуальная версия от 28.08.2015)
• Firefox 40.0.3
• Opera 31.0

Старый ответ

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

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

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

Демо-версия Codepen: 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;
}

Демо:

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

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

$(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 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 сделает это за вас. Кажется, с этим регулярным выражением все в порядке (по крайней мере, оно блокирует ваш testing@.com! Ха-ха)

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

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

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

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/ Надеюсь, это поможет!

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

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

пример

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

вы можете просто использовать атрибут oninvalid = " с привязкой к 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="xgqfrms@email.xyz" 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