Как изменить значение по умолчанию "пожалуйста, заполните это поле" в двух поле

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

$(document).ready(function() {
var elements = document.getElementsByTagName("INPUT");
for (var i = 0; i < elements.length; i++) {
    elements[i].oninvalid = function(e) {
        e.target.setCustomValidity("");
        if (!e.target.validity.valid) {
            e.target.setCustomValidity("Username cannot be blank");
        }
    };
    elements[i].oninput = function(e) {
        e.target.setCustomValidity("");
    };
} })

Ответ 1

Извините, некоторые ошибки в моем коде. Попробуйте, что работает для меня:

$(document).ready(function() {
var msg="";
var elements = document.getElementsByTagName("INPUT");

for (var i = 0; i < elements.length; i++) {
   elements[i].oninvalid =function(e) {
        if (!e.target.validity.valid) {
        switch(e.target.id){
            case 'password' : 
            e.target.setCustomValidity("Bad password");break;
            case 'username' : 
            e.target.setCustomValidity("Username cannot be blank");break;
        default : e.target.setCustomValidity("");break;

        }
       }
    };
   elements[i].oninput = function(e) {
        e.target.setCustomValidity(msg);
    };
} 
})

Ответ 2

Вы можете добавить атрибут id как к имени пользователя, так и к паролю input:

<input placeholder="Username" required id="username" />
<input type="password" placeholder="Password" required id="password" />

Затем вы можете использовать оператор switch для добавления специального сообщения проверки в соответствии с целью события:

$(document).ready(function () {
    var elements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function (e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                switch (e.srcElement.id) {
                    case "username":
                        e.target.setCustomValidity("Username cannot be blank");
                        break;
                    case "password":
                        e.target.setCustomValidity("Password cannot be blank");
                        break;
                }
            }
        };
        elements[i].oninput = function (e) {
            e.target.setCustomValidity("");
        };
    }
})

Здесь демо.

Ответ 3

Вы можете использовать этот код.

   <input type="text"  required="" name="username" placeholder="Username" oninvalid="this.setCustomValidity('Username cannot be blank')">
   <input type="password"  required="" name="password" placeholder="Password" oninvalid="this.setCustomValidity('Password cannot be blank')">

Ответ 4

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

$(document).ready(function() {
var msg="";
var elements = document.getElementsByTagName("INPUT");
for (var i = 0; i < elements.length; i++) {
    elements[i].oninvalid = function(e) {
        e.target.setCustomValidity("");

        switch(e.target.id){
            case "password" :
            msg="Bad password";
            case "username" :
            msg="Username cannot be blank";
        }

        if (!e.target.validity.valid) {
            e.target.setCustomValidity(msg);
        }
    };
    elements[i].oninput = function(e) {
        e.target.setCustomValidity("");
    };
} })