How to change default "please fill out this field" in two field

Question

I would like two different messages in two field, for example, the username and password field that contain messages like "username cannot be blank" and "password cannot be blank". I only managed to change the message, but it is then the same for both fields. It's here

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

possible duplicate of [HTML5 form required attribute. Set custom validation message?](http://stackoverflow.com/questions/5272433/html5-form-required-attribute-set-custom-validation-message) — Ciro Santilli OurBigBook.com, Jul 27 '14 at 13:12

score 15 · Accepted Answer · answered Jun 07 '13 at 08:48

sorry, some mistakes in my code. Try that, that works for me :

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

instead of using Switch, what about try to read data-xyz property from tag directly. — Anirudha Gupta, Jan 21 '15 at 12:46

score 9 · Answer 2 · answered Dec 28 '16 at 08:06

9

You can use this code.

   <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')">

answered Dec 28 '16 at 08:06

Obaidul Haque

916
11
18

THIS ONE is the simplest and more efficient solution! why is not accepted best answer_? – Laynier Piedra Mar 20 '23 at 14:54

score 4 · Answer 3 · answered Jun 02 '13 at 19:58

You may add an id attribute to both your username and password input elements:

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

Then you may use a switch statement to add the custom validation message according to the target of the event:

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

Here's a demo.

Alex,in your demo, both fields contain the message "Please fill out this field" — Godfather, Jun 04 '13 at 07:53

score 0 · Answer 4 · answered Jun 02 '13 at 19:58

0

you make a loop on all your input elements that's why you obtain the same result in each element. Give an id to your input for example username and password, then try :

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

answered Jun 02 '13 at 19:58

scraaappy

2,830
2
19
29

Scraaappy, when I enter the username and click Log in in password field message is "Username cannot be blank". – Godfather Jun 03 '13 at 10:18
can you post your complete code ? did you write the correct id in your input field (like Alex wrote it). You can place an alert in your javascript code to see what's going wrong. `alert('target id:'+e.target.id);` – scraaappy Jun 05 '13 at 10:03
My complete code is [here](http://jsfiddle.net/5fp4Y/7/).When I enter the username and click Log in in password field message is "Username cannot be blank – Godfather Jun 06 '13 at 11:05

How to change default "please fill out this field" in two field

4 Answers4

Linked