0

Подскажите пожалуйста, почему у меня не применяется стиль к textarea при пустом значении?

$("#sendMail").on("click", function() {

  //создаем экземпляр класс FormData, тут будем хранить всю информацию для отправки
  var formData = new FormData();

  //присоединяем наш файл
  jQuery.each($('#file_v')[0].files, function(i, file) {
    formData.append('file_v', file);
  });

  //присоединяем остальные поля
  let name = $("#name").val().trim();
  let email = $("#email").val().trim();
  let tel = $("#tel").val().trim();
  let number_order = $("#number_order").val().trim();
  let message = $("#message").val().trim();
  let checkbox_check = $("#checkbox_check").prop('checked');

  //проверяем поля на заполнение
  // ВОТ ТУТ ПРИМЕНЯЕМ СТИЛИ ЕСЛИ ПОЛЯ НЕ ЗАПОЛНЕННЫ ***************************************************************
  if (name === '' || email === '' || tel === '' || number_order === '' || message === '' || !checkbox_check) {
    $('.modal_error').show();
    $.each($('.input-box input'), function(i, v) {
      if ($(this).val() == '') {
        $(this).addClass('empty_field');
      } else {
        $(this).removeClass('empty_field');
      }
    });
    return false;
  }

  function isEmail(email) {
    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return regex.test(email);
  }
  if (!isEmail(email)) {
    $('.modal_error_email').show();
    return false; //  выход из функции отправки формы
  }

  formData.append('name', name);
  formData.append('email', email);
  formData.append('tel', tel);
  formData.append('number_order', number_order);
  formData.append('message', message);

  //отправляем через ajax
  $.ajax({
    url: "assets/ajax/mail.php",
    type: "POST",
    dataType: "json",
    cache: false,
    contentType: false,
    processData: false,
    data: formData, //указываем что отправляем
    beforeSend: function() {
      $("#form_contact").prop("disable", true);
      $(".main-btn").attr("disabled", true);
      $(".loading_mail").show();
    },
    success: function(data) {
      //стереть данные из инпутов
      $("#form_contact").trigger("reset");
      
      /////////////**********////////////
      //убрать загрузачное окно
      $(".loading_mail").hide();
      ////////////**********//////////////

      //убрать подсветку
      $('.input-box input').removeClass('empty_field');
      $(".main-btn").attr("disabled", false);
      $('.modal_success').show();
      console.log(data);
    }
  });
  return false;
});
.input-box input.empty_field {
  box-shadow: 0 0 10px red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

<form id="form_contact" action="" method="post" enctype="multipart/form-data" class="contact-one__form">
  <!---->
  <div class="row">
    <div class="col-lg-6">
      <div class="input-box has-feedback nameBlock">
        <label for="name" class="control-label ">Имя*</label>
        <input required type="text" id="name" placeholder="Иван Иванов" name="name" value="" class="">
      </div>
    </div>
    <!-- /.col-lg-6 -->
    <div class="col-lg-6">
      <div class="input-box">
        <label for="email" class="control-label">Email-адрес*</label>
        <input required type="email" id="email" placeholder="Email" name="email" value="" class="">
      </div>
    </div>
    <!-- /.col-lg-6 -->
    <div class="col-lg-6">
      <div class="input-box _req">
        <label for="tel" class="control-label">Номер телефона*</label>
        <input required type="tel" id="tel" placeholder="+79997772255" name="tel" value="" class="">
      </div>
    </div>
    <!-- /.col-lg-6 -->
    <div class="col-lg-6">
      <div class="input-box">
        <label for="number_order" class="control-label">№ заказа*</label>
        <input required id="number_order" type="text" placeholder="0000000-я00" name="number_order" value="" class="">
      </div>
    </div>
    <!-- /.col-lg-6 -->
    <div class="col-lg-12">
      <div class="input-box">
        <label for="message" class="control-label">Сообщение*</label>
        <textarea id="message" class="message" id="message" name="message" placeholder="Сообщение" class="">
                                        </textarea>
      </div>
    </div>
    <!-- /.col-lg-12 -->
    <div class="col-lg-12">
      <div class="file">
        <div class="file__item">
          <input type=file id="file_v" name="file_v" accept="image/*,video/*" class="file__input">
          <div class="file__button">Прикрепить файл</div>
        </div>
        <div id="formPreview" class="file__preview"></div>
      </div>
    </div>
    <div class="col-lg-12">
      <div class="checkbox">
        <input required id="checkbox_check" checked type="checkbox" name="agreement" class="checkbox__input">
        <label for="checkbox_check" class="checkbox__label _error"><span>Я даю согласие на обработку персональных данных в соответствии с <a href="">Условиями</a>*</span></label>
      </div>
    </div>
    <div class="col-lg-12 text-left">
      <br>
      <button id="sendMail" class="main-btn"> Отправить </button>
    </div>
  </div>
</form>

0

1 ответ 1

2

Ошибки:

  1. Все пробелы между > и </textarea> помещаются в textarea как содержимое
  2. Стили применяются только к input
  3. В коде классы изменяются только для input

Код, который делает то, что ожидается:

$("#sendMail").on("click", function () {

    //создаем экземпляр класс FormData, тут будем хранить всю информацию для отправки
    var formData = new FormData();

    //присоединяем наш файл
    jQuery.each($('#file_v')[0].files, function(i, file) {
        formData.append('file_v', file);
    });

    //присоединяем остальные поля
    let name = $("#name").val().trim();
    let email = $("#email").val().trim();
    let tel = $("#tel").val().trim();
    let number_order = $("#number_order").val().trim();
    let message = $("#message").val().trim();
    let checkbox_check = $("#checkbox_check").prop('checked');

    //проверяем поля на заполнение
    // ВОТ ТУТ ПРИМЕНЯЕМ СТИЛИ ЕСЛИ ПОЛЯ НЕ ЗАПОЛНЕННЫ ***************************************************************
    if (name === '' || email === '' || tel === '' || number_order === '' || message === '' || !checkbox_check) {
        $('.modal_error').show();
        $.each($('.input-box input'),function(i, v) {
            if ($(this).val() == '') {
                $(this).addClass('empty_field');
            } else {
                $(this).removeClass('empty_field');
            }
        });
        $.each($('.input-box textarea'),function(i, v) {
            if ($(this).val() == '') {
                $(this).addClass('empty_field');
            } else {
                $(this).removeClass('empty_field');
            }
        });
        return false;
    } else {
    //удалить стили, если все поля заполнены
        $.each($('.input-box input'),function(i, v) {
            $(this).removeClass('empty_field');
        });
        $.each($('.input-box textarea'),function(i, v) {
            $(this).removeClass('empty_field');
        });
    }

    if (!isEmail(email)) {
        $('.modal_error_email').show();
        return false;       //  выход из функции отправки формы
    }

    formData.append('name', name);
    formData.append('email', email);
    formData.append('tel', tel);
    formData.append('number_order', number_order);
    formData.append('message', message);

    //отправляем через ajax
    $.ajax({
        url: "assets/ajax/mail.php",
        type: "POST",
        dataType : "json",
        cache: false,
        contentType: false,
        processData: false,
        data: formData, //указываем что отправляем
        beforeSend: function () {
            $("#form_contact").prop("disable", true);
            $(".main-btn").attr("disabled", true);
            $( ".loading_mail").show();
        },
        success: function(data){
            //стереть данные из инпутов
            $("#form_contact").trigger("reset");
            /////////////**********////////////
            
            //убрать загрузачное окно
            $( ".loading_mail").hide();
            ////////////**********//////////////
            
            //убрать подсветку
            $('.input-box input').removeClass('empty_field');
            $(".main-btn").attr("disabled", false);
            $('.modal_success').show();
            console.log(data);
        }
    });
    return false;
});

function isEmail(email) {
    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return regex.test(email);
}
.input-box .empty_field {
    box-shadow: 0 0 10px red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<form id="form_contact" action="" method="post" enctype="multipart/form-data" class="contact-one__form">  <!---->
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="input-box has-feedback nameBlock">
                                        <label for="name" class="control-label ">Имя*</label>
                                        <input required type="text" id="name" placeholder="Иван Иванов" name="name" value="" class="" >
                                    </div>
                                </div><!-- /.col-lg-6 -->
                                <div class="col-lg-6">
                                    <div class="input-box"> 
                                        <label for="email" class="control-label" >Email-адрес*</label>
                                        <input required type="email" id="email" placeholder="Email" name="email" value="" class="">
                                    </div>
                                </div><!-- /.col-lg-6 -->
                                <div class="col-lg-6">
                                    <div class="input-box _req">
                                        <label for="tel" class="control-label">Номер телефона*</label>
                                        <input required type="tel" id="tel" placeholder="+79997772255" name="tel" value="" class="">
                                    </div>
                                </div><!-- /.col-lg-6 -->
                                <div class="col-lg-6">
                                    <div class="input-box">
                                        <label for="number_order" class="control-label">№ заказа*</label>
                                        <input required id="number_order" type="text" placeholder="0000000-я00" name="number_order" value="" class="">
                                    </div>
                                </div><!-- /.col-lg-6 -->
                                <div class="col-lg-12">
                                    <div class="input-box">
                                        <label for="message" class="control-label">Сообщение*</label>
                                        <textarea id="message" class="message" id="message" name="message"
                                        placeholder="Сообщение" class=""></textarea>
                                    </div>
                                </div><!-- /.col-lg-12 -->
                                <div class="col-lg-12">
                                    <div class="file">
                                        <div class="file__item">
                                            <input type=file id="file_v" name="file_v" accept="image/*,video/*" class="file__input">
                                            <div class="file__button">Прикрепить файл</div>
                                        </div>
                                        <div id="formPreview" class="file__preview"></div>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="checkbox">
                                        <input required id="checkbox_check" checked type="checkbox" name="agreement" class="checkbox__input">
                                        <label for="checkbox_check" class="checkbox__label _error"><span>Я даю согласие на обработку персональных данных в соответствии с <a href="">Условиями</a>*</span></label>
                                    </div>
                                </div>
                                <div class="col-lg-12 text-left">
                                    <br>
                                    <button  id="sendMail" class="main-btn"> Отправить </button>
                                </div>
                            </div>
                        </form>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.