How to make the span error highlighted if the field is empty and highlighted suc sucsess if the field is filled? enter image description here

enter image description here

    1 answer 1

    I think it is implemented far not on CSS3, but on JS. Here is an example implementation using jQuery:

    $('input#foo').on('keyup', function() { var $this = $(this); if (this.value.length === 0) { $('.success').hide(); $('.error').show(); $this.removeClass("active-success"); $this.addClass("active-error"); } else { $('.error').hide(); $('.success').show(); $this.removeClass('active-error'); $this.addClass("active-success"); } }); 
     .active-error { box-shadow: 0 0 0px 4px #ed1c24; } .active-success { box-shadow: 0 0 0px 4px #22b14c; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="foo"> <span class="error" style="display: none;">Ошибка</span> <span class="success" style="display: none;">Успешно</span>

    • if I were you, I would rename the topic to something like "Tips for form validation." So it will be easier for other forum participants to find your question. - mr cppst
    • Thanks for the answer. How to bind the color of the field: error - red, succsess-green, default - blue? - svil
    • Now I will finish the code - mr cppst
    • My answer did not suit you? - mr cppst
    • If my answer helped you, could you put him + or mark him as "True"? Or maybe you still do not understand something? - mr cppst