0

Написал условие что бы поля обязательно заполняли, но хотелось бы что бы шла проверка email и телефона. Подскажите пожалуйста как это сделать.

$("#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").val();

  let checkbox_check = $("#checkbox_check").prop('checked');


  if (name === '' || email === '' || tel === '' || number_order === '' || message === '' || !checkbox_check) {
    alert("Введите обязательные поля");
    return false;
  }
  alert('Сообщение отправлено!');
  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);
      $(".petrov").show();

    },
    success: function(data) {
      $("#form_contact").trigger("reset");
      $(".petrov").hide();
      console.log(data);
      alert('Сообщение отправлено!');
      $(".Modal").show();


    }
  });

  return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></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="input">
      </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">
        <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 required class="_req" id="message" name="message" placeholder="Сообщение" class="_error">
                                        </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>

2
  • Глупый вопрос, а поля типа email и tel из html5 использовать нельзя?
    – Quazimorda
    29 янв 2021 в 12:51
  • пробовал из html , не работает. Из js хочется, к тому же из js позже открывать подсветку полей можно. 29 янв 2021 в 13:05

1 ответ 1

1

Может как-то так примитивно.

function validateEmail(email) {
    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email.toLowerCase());
}

function validatePhone(phone) {
    const re = /^(\+{0,})(\d{0,})([(]{1}\d{1,3}[)]{0,}){0,}(\s?\d+|\+\d{2,3}\s{1}\d+|\d+){1}[\s|-]?\d+([\s|-]?\d+){1,2}(\s){0,}$/gm;
    return re.test(phone);
}



$("#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").val();

    let checkbox_check = $("#checkbox_check").prop('checked');

    let isValid = true;
    if (!validateEmail(email)) {
      $("#email").addClass("red");      
      isValid = false;
    } else {
      $("#email").removeClass("red");
    }
    
    if (!validateEmail(tel)) {
      $("#tel").addClass("red");
      isValid = false;      
    } else {
      $("#tel").removeClass("red");
    }
    
    if (!isValid) return false;
    
    if (name === '' || email === '' || tel === '' || number_order === '' || message === '' || !checkbox_check) {
        alert("Введите обязательные поля");
        return false;
    }
    
    alert('Сообщение отправлено!');
    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);
            $( ".petrov").show();

        },
        success: function(data){
            $("#form_contact").trigger("reset");
            $( ".petrov").hide();
            console.log(data);
            alert('Сообщение отправлено!');
            $(".Modal").show();


        }
    });

    return false;
});
.red
{
    border: solid red; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></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="input" >
                                    </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">
                                        <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 required class="_req" id="message" name="message"
                                        placeholder="Сообщение" class="_error">
                                        </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>

Моожно конечно проверять на вводе а не перед отправкой формы. Но суть останется та же.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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