jQuery validate - display error message in text field

Question

I'm building a simple form for my client and They want to display the error message in the text field. Would this be possible to achieve this with jQuery's Validation plugin?

Thanks!

Use placeholder text in your form fields. For validation errors, it is not good idea to display message in the field, rather highlight the field and display error next to the field. — Fr0zenFyr, Mar 06 '13 at 08:46

Sparky · Answer 1 · 2017-07-23T20:36:00.927

Quote OP:

"They want to display the error message in the text field. Would this be possible to achieve this with jQuery's Validation plugin?"

Yes. It's possible Use the plugin's errorPlacement callback function/option.

NO, I would never do it. This makes it nearly impossible for the user to properly interact with the form. The error wipes out any data the user already entered and the user has to delete the text of the message to enter their data. I'm sure you can think of clever ways to overcome these issues, but IMO, it's a really poor design from a UI perspective. Show your client this demo, then scroll down and show them my second demo.

DEMO: http://jsfiddle.net/6fUTV/

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        // rules & options,
        errorPlacement: function(error, element) {
            element.val(error.text());
        }
    });

});

EDIT: Instead you could use the placeholder attribute. The message will still be inside of the input element, but it will not be seen as a value so it will not interfere with user interaction as much. However, the big downside to this approach is that if you have a rule to validate the data format such as email, minlength, etc... the user will never see the validation message because there is a value sitting inside the field on top of the placeholder!

errorPlacement: function(error, element) {
    element.attr("placeholder", error.text());
}

DEMO 2: http://jsfiddle.net/n5saemj7/

Alternatives:

Show errors using message bubbles: http://jsfiddle.net/kyK4G/

More info: How to display messages from jQuery Validate plugin inside of Tooltipster tooltips?

Thanks for your input. Your comment was very useful to convince my client not to show the error message in the field itself. And yes, I'm pretty basic at JavaScript. I've gotta sit down and learn it properly :( — JungleJap, Mar 04 '13 at 12:05
+1.Your first fiddle is kinda funny. It is impossible to delete the error message to input the required info. I think my answer works better in such scenario though your second fiddle is much better but that wasn't something OP asked in question, fortunately your assumption worked. For the downvote on my answer - i clearly mentioned that it is a simple solution to the simple question. By the way this seems to be another abandoned solution going unaccepted till eternity. @JungleJap: Start accepting an answer that solves your problem, otherwise, people will stop answering your questions. — Fr0zenFyr, Mar 06 '13 at 08:39
@Fr0zenFyr, thank-you. My first jsFiddle was simply to demonstrate that his request makes no sense and to show why. There are a couple of clumsy workarounds that would have made it a little better, but I chose to leave those out for the same reason... I'm clearly just making the point that putting the error inside the element is a very bad design. — Sparky, Mar 06 '13 at 14:57

score 7 · Answer 2 · answered Mar 26 '14 at 18:33

7

They told you that is a bad method, maybe it is.

But you can use placeholder, instead of replace the content already in, just change this:

errorPlacement: function(error, element) {
    element.val(error.text());
}

For this:

errorPlacement: function(error, element) {
    element.attr("placeholder",error.text());
}

Hope that helped you, take care !

answered Mar 26 '14 at 18:33

DarkteK

821
1
15
26

That would work great when the only rule is `required`. However, the big downside to this approach is that if you have a rule to validate the data format such as `email`, `minlength`, etc... the user will never be able to see the error message. – Sparky Jan 26 '15 at 22:57

score 0 · Answer 3 · answered Mar 01 '13 at 10:50

0

Yes ofcourse this is possible as you validate the text field and its caught in error simply assign the error msg as value of that text field or placeholder also.

$("#yourtextfield").val("This field can't be empty.");

answered Mar 01 '13 at 10:50

Yashankit Vyas

124
5

And how to do it with the OP's plugin? – Sparky Mar 01 '13 at 17:42

score 0 · Answer 4 · answered Mar 01 '13 at 10:56

Yes you can. Your skills seem very raw.

Let's take the simple path because your question sounds simple. On error, give a condition to assign the message string as a value to the input field.

something like

var err = "err_msg";

$('#elementId').val(err);

See the section .val('value') at http://api.jquery.com/val/

jQuery validate - display error message in text field

4 Answers4