Hi Folks,
I'm trying to build a script that will easily check to see if a form input has a value, and if not, write an error with the field's label name in it. I know I'm on the right track, but I can't figure out how to use the label name in conjunction with other text. Here's the html:
<label for="name">Name</label>
<input id="name" type="text" required>
<label for="email">Email</label>
<input id="email" type="email" required>
and the js:
$('input[required]').focusout(function() {
var labelvalue = $('label[for=' + $(this).attr('id') + ']').html();
if (!$(this).val()) {
$(this).after('<p class="error" role="alert">The + labelvalue + field is required</p>');
} else {
$(this).next('.error').remove();
}
});
It works for the most part, but the error comes out as "The + labelvalue + field is required" instead of "The Name field is required"
Here's a fiddle as well:
Bonus points if someone can tell me how to make it so that the error doesn't get written more than once for each field ;)