CSS form control

by magizter

HTML

<form id="sendform">
  <input type="text" required placeholder="name">
  <span class="ctext"></span>
  <input type="email" required placeholder="email">
  <span class="ctext"></span>
      
 <button class="btn-primary">Send</button>
      
</form>

CSS

input + span {
  color: #999;
}


input:valid + span:after {
    content: 'valid';
    color: #0c0;
  }

input:invalid + span:after {
    content: 'invalid';
}

.ctext {
    clear:both; display:block;
    color: #fff
}

JavaScript

$('.btn-primary').click(function() {
    if($("#sendform")[0].checkValidity())
    {
        // $('#sendform').submit();
        alert('Form post');
    }
    else
    {
        $(".ctext").css({"color": "#B30528"});        
        
    }
});