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

Question

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

<div>
    <label for="phoneNumber" class="label">Phone Number</label>
    <input name="phoneNumber" type="text" id="phoneNumber" size="13"  style="float:left;margin-right:10px;">
</div>
<div>
    <input type="checkbox" name="activePN" id="activePN" checked >
    <label for="activePN">Active</label>
</div>

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('<p>Phone number has to be 10 digits long.</p>')
        proceed = false;
    }
...
...
...
});

I was hopping that adding those <p> </p> tags would do it. But they don't... Note: I also tried with html() instead of text() and with activePN instead of phoneNumber.

Answer 1

Use .after().

$('#phoneNumber').after('<p>Phone number has to be 10 digits long.</p>')

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.

Answer 2

Try:

$('#submit').click(function(){
  var proceed = true;
  var strippedPN = $('#phoneNumber').val().replace(/[^\d\.]/g, ''); //strips non-digits from the string - already a String
  if(strippedPN.length !== 10){
    $('#phoneNumber').after('<p>Phone number has to be 10 digits long.</p>')
     proceed = false;
  }
}