How to add a validation error message next to a field using jQuery

Question

Hi have a form with a few fields. Amongst them: ```

Phone Number

Active

``` The, when the form is submited, I want to validate the input and write next to each field for whichever field didn't validate. Like this: ``` $('#submit').click(function () { var proceed = true; var strippedPN = $('#phoneNumber').val().replace(/[^\d\.]/g, '').toString(); //strips non-digits from the string if (strippedPN.length !== 10) { $('#phoneNumber').text('

Phone number has to be 10 digits long.

') proceed = false; } ... ... ... }); ``` I was hopping that adding those `

` tags would do it. But they don't... Note: I also tried with `html()` instead of `text()` and with `activePN` instead of `phoneNumber`.

Accepted Answer

Use `.after()`. ``` $('#phoneNumber').after('

Phone number has to be 10 digits long.

') ``` It might be wise to add a class to your `p` tag too, so you can remove them when the number is edited to be correct.

How to add a validation error message next to a field using jQuery

Solution

Problem