There is such a problem: I can not give the input fields a red border when they are not filled. I need to do this with js, but my script does not work. Here is the code itself. The whole problem is in the script, where I first try to check if the field is empty and if so, I assign him a class with a red border.

$('document').ready(function() { $('#button').on('click', function() { console.log(32) if ($('.rfield').val() != '') { // Если поле не пустое удаляем класс-указание $('.rfield').removeClass('empty_field'); } else { // Если поле пустое добавляем класс-указание $(this).addClass('empty_field'); } }); }); 
 .empty-field { border: 2px red; } .form_box { width: 300px; margin: 40px auto; } .form_box label { font-size: 13px; font-weight: bold; color: #444444; display: block; } .form_box input { display: block; border: 2px solid #cfcfcf; font-size: 14px; color: #444444; padding: 7px 7px 8px; width: 250px; margin-bottom: 20px; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .form_box input:focus { outline: none; border-color: #07a6e6; } .form_box .btn_submit { border: none; width: 180px; text-align: center; background: #07a6e6; font-size: 13px; font-weight: bold; color: #ffffff; cursor: pointer; height: 35px; line-height: 28px; padding: 0; } .form_box .btn_submit:hover { background: #009ac2; } .form_box .btn_submit:active { box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2); } .form_box .btn_submit.disabled, .form_box .btn_submit.disabled:hover { background: #afdde6; cursor: default; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <div class="form_box"> <label for="user_name">Имя пользователя:</label> <input type="text" class="rfield" id="user_name" /> <label for="user_family">Фамилия пользователя</label> <input type="text" class="rfield" id="user_family" /> <label for="user_phone">Телефон пользователя:</label> <input type="text" class="rfield" id="user_phone" /> <label for="user_work">Профессия пользователя:</label> <input type="text" class="rfield" id="user_work" /> <button type="submit" id="button" class="btn_submit disabled">Submit</button> </div>

    2 answers 2

    1. empty_field : empty_field ! = empty_field empty-field .
    2. Each input must be checked individually: $('.form_box .rfield').each(function() {...
    3. The .empty_field class .empty_field must be more specific than the .form_box input .

     <!DOCTYPE html> <html> <head> <title>rg</title> </head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <body> <style type="text/css"> .form_box input.empty_field { border-width: 2px; border-color: red; } .form_box { width: 300px; margin: 40px auto; } .form_box label { font-size: 13px; font-weight: bold; color: #444444; display: block; } .form_box input { display: block; border: 2px solid #cfcfcf; font-size: 14px; color: #444444; padding: 7px 7px 8px; width: 250px; margin-bottom: 20px; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .form_box input:focus { outline: none; border-color: #07a6e6; } .form_box .btn_submit { border: none; width: 180px; text-align: center; background: #07a6e6; font-size: 13px; font-weight: bold; color: #ffffff; cursor: pointer; height: 35px; line-height: 28px; padding: 0; } .form_box .btn_submit:hover { background: #009ac2; } .form_box .btn_submit:active { box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2); } .form_box .btn_submit.disabled, .form_box .btn_submit.disabled:hover { background: #afdde6; cursor: default; } </style> <div class="form_box"> <label for="user_name">Имя пользователя:</label> <input type="text" class="rfield" id="user_name" /> <label for="user_family">Фамилия пользователя</label> <input type="text" class="rfield" id="user_family" /> <label for="user_phone">Телефон пользователя:</label> <input type="text" class="rfield" id="user_phone" /> <label for="user_work">Профессия пользователя:</label> <input type="text" class="rfield" id="user_work" /> <button type="submit" id="button" class="btn_submit disabled">Submit</button> </div> </body> <script type="text/javascript"> $('document').ready(function() { $('#button').on('click', function() { $('.form_box .rfield').each(function() { if ($(this).val() != '') { console.log(32); // Если поле не пустое удаляем класс-указание $(this).removeClass('empty_field'); } else { console.log(33); // Если поле пустое добавляем класс-указание $(this).addClass('empty_field'); } }); }); }); </script> </html>

      I suggest you use validation out of the box. HTML5 has the necessary attributes for inputs, namely required in this case; we also need the pseudo-class :invalid in CSS. The only disadvantage of such validation is that it always happens, and not only after the form submits. In order to avoid this, it is necessary after clicking on the button for all inputs with the required attribute to add the class req . And in CSS to this class to set .req:invalid - and validation for the empty value of the input is ready. You can also add styles for correctly completed inputs with .req:valid .

       $('document').ready(function() { $('#button').on('click', function() { $('input[required]').addClass('req'); }); }); 
       .form_box { width: 300px; margin: 40px auto; } .form_box label { font-size: 13px; font-weight: bold; color: #444444; display: block; } .form_box input { display: block; border: 2px solid #cfcfcf; font-size: 14px; color: #444444; padding: 7px 7px 8px; width: 250px; margin-bottom: 20px; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .form_box .req:invalid { border: 2px solid red; } .form_box .req:valid { border: 2px solid green; } .form_box input:focus { outline: none; border-color: #07a6e6; } .form_box .btn_submit { border: none; width: 180px; text-align: center; background: #07a6e6; font-size: 13px; font-weight: bold; color: #ffffff; cursor: pointer; height: 35px; line-height: 28px; padding: 0; } .form_box .btn_submit:hover { background: #009ac2; } .form_box .btn_submit:active { box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2); } .form_box .btn_submit.disabled, .form_box .btn_submit.disabled:hover { background: #afdde6; cursor: default; } 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <div class="form_box"> <label for="user_name">Имя пользователя:</label> <input type="text" class="rfield" id="user_name" required /> <label for="user_family">Фамилия пользователя</label> <input type="text" class="rfield" id="user_family" required /> <label for="user_phone">Телефон пользователя:</label> <input type="text" class="rfield" id="user_phone" required /> <label for="user_work">Профессия пользователя:</label> <input type="text" class="rfield" id="user_work" required /> <button type="submit" id="button" class="btn_submit disabled">Submit</button> </div>