Good day! There is a task: a form with input fields, which, when the focus is changed, produce a red cross at the end of the field. But if the user filled in the field (regardless of whether a red cross is displayed or not), a green check mark appears at the end of the field. How to implement this with jQuery?

    1 answer 1

    Subscribe to .change() , there we check for fullness and we drop the required class.

     $('input').change(function() { let el = $(this).parent(); if ($(this).val()) { el.addClass('success'); el.removeClass('error'); } else { el.addClass('error'); el.removeClass('success'); } }); 
     span { position: relative; } .success:after, .error:after { position: absolute; right: 4px; color: green; content: '\2713'; } .success:after { color: green; content: '\2713'; } .error:after { color: red; top: -2px; content: '\2717'; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span> <input type="text" /> </span>