Необхідна перевірка спеціального поля

У мене є одна форма з багатьма полями введення. Я поставив перевірку 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/reitions/16069817/6

Ви можете просто досягти цього, використовуючи атрибут oninvalid, оформити цей демо-код

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

Демонстрація:

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! Ха-ха)

Як ви бачите на скрипці, я роблю додаткову валідацію події форми подання ( це стосується і документа. Вже ):

$("#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 = " , використовуючи bingding цей event.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- валідація

https://www.w3.org/TR/html51/sec-forms.html#sec-constraint- валідація

Ви можете додати цей сценарій для показу власного повідомлення.

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

Для інших перевірок, таких як невідповідність шаблону, ви можете додати додаткові, якщо інша умова

подібно до

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

Є й інші умови дійсності, такі як rangeOverflow, rangeUnderflow, stepMismatch, typeMismatch, valid