Search code examples
jqueryinputpageload

jQuery issue with input fields on pagelaod

I have to following code, which works perfectly fine. except on initial pageload the red X is visible.

The JS

$('#email').keyup(function() {
var feedback = $("label[for='em']");
if($(this).val() === ''){
  feedback.hide();
} else {
  feedback.show();
}
});

The CSS:

input[type="email"]:invalid + label::after{
font-family: fortawesome;
color:red;
content: "\f004";
padding-left:$l_global-padding;
}

The HTML

<input id="email" type="email"required autofocus name="dieEmail"><label for="em"></label>
Solution

  • Trigger event on page load as well.

    $('#email').keyup(function() {
  var feedback = $("label[for='em']");
  if($(this).val() === ''){
   feedback.hide();
  } else {
   feedback.show();
  }
}).trigger('keyup');//trigger on page load