Почему мой код JS не выводит сообщение в HTML

Question

Написал вот такую проверку для полей, нажимаю отправить при пустых полях и тишина, сообщение из "errorMess" не выводится. Я в JS Новичек, помогите пожалуйста, вод код.

JS:

$(function() {
    alert('Подключен form_mail.js');
});

$("#sendMail").on("click", function () {
    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 down = $("#down").val();

    if (name === "") {
        $("errorMess").text("Введите Имя");
        return false;
    } else if (email === "") {
        $("errorMess").text("Введите Email");
        return false;

    } else if (tel === "") {
        $("errorMess").text("Введите Телефон");
        return false;

    } else if (number_order === "") {
        $("errorMess").text("Введите № заказа");
        return false;

    } else if (message.length < 5) {
        $("errorMess").text("Введите Сообщение не менее 5 символов");
        return false;
    }

    $("#errorMess").text("");

    // $.ajax({
    //     url: 'ajax/mail.php',
    //     type: 'POST',
    //     cache: false,
    //     data: {'name': name, 'email': email, 'tel': tel, 'number_order': number_order, 'message': message},
    //
    //
    // })
});

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Форма обратной связи</title>
    <script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form>  <!--action="form_send.php" method="post" enctype="multipart/form-data" class="contact-one__form-->
    <div class="row">
        <div class="col-lg-6">
            <div class="input-box">
                <label for="name">Ваше имя</label>
                <input type="text" id="name" placeholder="Иван Иванов" name="name" value="">
            </div>
        </div><!-- /.col-lg-6 -->
        <div class="col-lg-6">
            <div class="input-box">
                <label for="email">Email</label>
                <input type="email" id="email" placeholder="Email" name="email" value="">
            </div>
        </div><!-- /.col-lg-6 -->
        <div class="col-lg-6">
            <div class="input-box">
                <label for="tel">Номер телефона</label>
                <input type="tel" id="tel" placeholder="+79997772255" name="tel" value="">
            </div>
        </div><!-- /.col-lg-6 -->
        <div class="col-lg-6">
            <div class="input-box">
                <label for="number_order">№ заказа</label>
                <input id="number_order" type="text" placeholder="0000000-я00" name="number_order" value="">
            </div>
        </div><!-- /.col-lg-6 -->
        <div class="col-lg-12">
            <div class="input-box">
                <label for="message">Сообщение</label>
                <textarea id="message" placeholder="Ваше сообщение" name="message"></textarea>
            </div>
        </div><!-- /.col-lg-12 -->
        <div class="col-lg-6">
            <input id="down" type="file" name="file" value="">
        </div><!-- /.col-lg-6 -->
        <div class="col-lg-12 text-left">
            <button type="button" id="sendMail" class="">Отправить</button>
        </div><!-- /.thm-btn contact-one__btn -->
    </div><!-- /.row -->
</form>
<br>
<div id="errorMess"></div>

<script src="form_mail.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

</script>


</body>
</html>

Answer 1

У вас везде написано trim, а надо trim(), т.к. это метод, а не свойство.

И у errorMess иногда нет решётки... надо #errorMess

$(function() {
    alert('Подключен form_mail.js');
});

$("#sendMail").on("click", function () {
    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 down = $("#down").val();
    debugger;
    if (name === "") {
        $("#errorMess").text("Введите Имя");
        return false;
    } else if (email === "") {
        $("#errorMess").text("Введите Email");
        return false;

    } else if (tel === "") {
        $("#errorMess").text("Введите Телефон");
        return false;

    } else if (number_order === "") {
        $("#errorMess").text("Введите № заказа");
        return false;

    } else if (message.length < 5) {
        $("#errorMess").text("Введите Сообщение не менее 5 символов");
        return false;
    }

    $("#errorMess").text("");

    // $.ajax({
    //     url: 'ajax/mail.php',
    //     type: 'POST',
    //     cache: false,
    //     data: {'name': name, 'email': email, 'tel': tel, 'number_order': number_order, 'message': message},
    //
    //
    // })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<form>  <!--action="form_send.php" method="post" enctype="multipart/form-data" class="contact-one__form-->
    <div class="row">
        <div class="col-lg-6">
            <div class="input-box">
                <label for="name">Ваше имя</label>
                <input type="text" id="name" placeholder="Иван Иванов" name="name" value="">
            </div>
        </div><!-- /.col-lg-6 -->
        <div class="col-lg-6">
            <div class="input-box">
                <label for="email">Email</label>
                <input type="email" id="email" placeholder="Email" name="email" value="">
            </div>
        </div><!-- /.col-lg-6 -->
        <div class="col-lg-6">
            <div class="input-box">
                <label for="tel">Номер телефона</label>
                <input type="tel" id="tel" placeholder="+79997772255" name="tel" value="">
            </div>
        </div><!-- /.col-lg-6 -->
        <div class="col-lg-6">
            <div class="input-box">
                <label for="number_order">№ заказа</label>
                <input id="number_order" type="text" placeholder="0000000-я00" name="number_order" value="">
            </div>
        </div><!-- /.col-lg-6 -->
        <div class="col-lg-12">
            <div class="input-box">
                <label for="message">Сообщение</label>
                <textarea id="message" placeholder="Ваше сообщение" name="message"></textarea>
            </div>
        </div><!-- /.col-lg-12 -->
        <div class="col-lg-6">
            <input id="down" type="file" name="file" value="">
        </div><!-- /.col-lg-6 -->
        <div class="col-lg-12 text-left">
            <button type="button" id="sendMail" class="">Отправить</button>
        </div><!-- /.thm-btn contact-one__btn -->
    </div><!-- /.row -->
</form>

<div id="errorMess"></div>

БЛОГ НА HUSL

Почему мой код JS не выводит сообщение в HTML

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