After implementing some jQuery validation, I wanted to display a text as a placeholder when the user skipped out of an input field without entering anything.
This is the code I wrote:
$('input[type="text"]').on('blur', function() {
if ( !!$(this).val() ) {
$(this).css({
'border': '#ff8383 1px solid'
});
$(this).attr('placeholder', 'This field is required');
}
else {
$(this).css({
'border': '#c3c3c3 1px solid'
});
$(this).attr('placeholder', '');
}
});
Although it functions correctly in Chrome Dev Tools here, unfortunately, it does not appear on the actual page.