When filling the form, if input filled incorrectly and gives the error :invalid , then you need to add the class .error in the label to which this input belongs and cancel if the input becomes :valid .

 .error { color: #f00; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <form> <label class="" for="email">e-mail</label> <input name="email" type="email"> <input type="submit" value="ok"> </form>

    2 answers 2

     input:invalid{ color: #f00; }

    And the code:

     <form> <label class="" id="label1" for="email">e-mail</label> <input name="email" type="email"> <input type="submit" value="ok"> </form> $('input[name="email"]').on('keyup', function () { if ($(this).is(':invalid')) { $('#label1').addClass('error'); } else{ $('#label1').removeClass('error'); } })
    • the variant is interesting, but you need to substitute the class for the input state — Neka
    • What is the problem to change to class? Instead of $ ('# label1'). Css ('color', 'red'); $ ('# label1'). addClass ('error'); And $ ('# label1'). Css ('color', 'black'); $ ('# label1'). removeClass ('error'); - Moonvvell
    • changed your message to classes. - Moonvvell

     input { font-size: 2rem; } input[type="email"]:invalid + label.email { color: #f00; } input[type="email"]:valid + label.email { color: green; } 
     <input name="email" type="email"> <label class="email" for="email">E-mail</label>