How can we display the form validation message inside the password box?

Question

Is there any way to display the form validation message inside the password box? because when I submit the form I am not getting the error message inside the box.. I know its not a text box, but still is there possible way to do this? here is the script which I am using..

<form action="mail.php" id="theform" name="theform" method="post">

 <p><label for="name">Name</label><br />
        <input id="name" type="text" value="" name="name" />
 </p>

 <p><label for="email">E-mail</label><br />
        <input id="email" type="text" value="" name="email" />
 </p>

<p><label for="message">Password</label><br />
        <input id="password" type="password" rows="7" cols="30" name="password"></input>
</p>

<p><input class="submit" type="submit" name="submit" value="Submit Form" />
</p>

 <p id="error">There were errors on the form, please make sure all fields are fill out correctly.</p>
</form>

Jsfiddle

Why inside the box? Why not at the right side, not just for Password, for Name and Email also. Feel that would look good. — Sakthi Kumar, Aug 08 '13 at 09:01
This form is for a mobile website.. so when we display the error messages at the right side, the form will get distorted. — Oliveshades, Aug 08 '13 at 09:04
I think this helps http://stackoverflow.com/questions/1544317/jquery-change-type-of-input-field — Sakthi Kumar, Aug 08 '13 at 09:10
This is a question about JavaScript; you should be showing the JavaScript along with your HTML. Do not rely solely on external links, demos, etc. — Sparky, Aug 09 '13 at 15:47

Popsyjunior · Accepted Answer · 2013-08-08T10:58:30.850

I think you can set the place holder to the error message you wantif it was not valid, then reset the fields..

Like the one here:

http://jsfiddle.net/dUNQn/1

$(document).ready(function(){
// Place ID's of all required fields here.
required = ["name", "email", "message", "password"];
// If using an ID other than #email or #error then replace it here
email = $("#email");
errornotice = $("#error");
// The text to show up within a field when it is incorrect
emptyerror = "Please fill out this field.";
emailerror = "Please enter a valid e-mail.";
passwerror = "Please enter a valid password";

$("#theform").submit(function(){    
    //Validate required fields
    for (i=0;i<required.length;i++) {
        var input = $('#'+required[i]);
        if ((input.val() == "") || (input.val() == emptyerror)) {
            input.addClass("needsfilled");
            input.val("");
            input.attr("placeholder", emptyerror);
            if( input.attr("type") == "password" ) {
                input.attr("placeholder", passwerror );    
            }
            errornotice.fadeIn(750);
        } else {
            input.removeClass("needsfilled");
        }
    }
    // Validate the e-mail.
    if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
        email.addClass("needsfilled");
        email.val("");
        email.attr("placeholder", emailerror);
    }

    //if any inputs on the page have the class 'needsfilled' the form will not submit
    if ($(":input").hasClass("needsfilled")) {
        return false;
    } else {
        errornotice.hide();
        return true;
    }
});

});

how do i add a specific error message for password filed; eg: passworderror = "Please enter your password."; — Oliveshades, Aug 08 '13 at 10:45
in this form other than email, all other field are displaying with a common error message "emptyerror = "Please fill out this field.";" so how we can add the customize the messages for each filed? — Oliveshades, Aug 08 '13 at 10:55

daniel__ · Answer 2 · 2013-08-08T09:37:52.920

0

You need to change the type of the input and you don't need jquery for that:

Just do:

function check() {
    if (document.getElementById("password").value == "") {
        $('#password').get(0).type = 'text';
    } else {
        $('#password')[0].type = 'password';
    }
}

http://jsfiddle.net/6Ce7H/

edited Aug 08 '13 at 09:37

answered Aug 08 '13 at 09:05

daniel__

10,809
14
59
90

score 0 · Answer 3 · answered Aug 08 '13 at 09:07

0

if($("#password").val.length==0){
$('#password').attr('type', 'text');
}
else{
$('#password').attr('type', 'password');
}

add the above condition to your code while submitting.

answered Aug 08 '13 at 09:07

Ramki

156
1
11

How can we display the form validation message inside the password box?

3 Answers3