Как сделать валидацию полей телефона и email в js

Написал условие что бы поля обязательно заполняли, но хотелось бы что бы шла проверка 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>


Ответы (1 шт):

Автор решения: Aziz Umarov

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

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>

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

→ Ссылка