Форма отправки с проверкой в ​​JQuery

Question

Я хочу отправить свою форму, если нет ошибки, но я не знаю, как это сделать.

Это моя контактная форма:

<form action="" id="contact-form">
     <div class="form-group">
       <input type="text" class="form-control" name="name" id="name"                                  placeholder="نام و نام خانوادگی"> <span id="cn-name"></span>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <input type="text" class="form-control" name="email" id="email" placeholder="ایمیل">
                            <span id="cn-email"></span>
                        </div>
                        <div class="form-group col-md-6">
                            <input type="text" class="form-control" name="mobile" id="mobile"
                                   placeholder="شماره موبایل"> <span id="cn-mobile"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <textarea class="form-control" rows="5" cols="25" name="message" id="message"
                                  placeholder="متن پیغام ..."></textarea> <span id="cn-message"></span>
                    </div>
                    <div class="form-group">
                        <button type="submit" id="submit" class="btn btn-success btn-block">ارسال</button>
                    </div>
                </form>

Это мой сценарий:

    var email_regex = /^(([^<>()\[\]\\.,;:\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,}))$/;
    var mobile_regex = /^09[0-3][0-9]{8}$/u;

    var state1 = false;
    var state2 = false;
    var state3 = false;
    var state4 = false;

    $("#email").keyup(function () {
        if (email_regex.test($(this).val())) {
            $(this).removeClass("is-invalid");
            $(this).addClass("is-valid");
            $("#cn-email").text("");
            state1 = true;
        } else {
            $(this).removeClass("is-valid");
            $(this).addClass("is-invalid");
            $("#cn-email").text("لطفا یک ایمیل درست وارد کنید.");
            $("#cn-email").addClass("text-danger");
            state1 = false;
        }
        if ($(this).val() == "") {
            $(this).removeClass("is-valid");
            $(this).addClass("is-invalid");
            $("#cn-email").text("لطفا ایمیل خود را وارد کنید.");
            $("#cn-email").addClass("text-danger");
            state1 = false;
        }
        return state1;
    });

    $("#name").keyup(function () {
        if ($(this).val().length <= 4) {
            $(this).removeClass("is-valid");
            $(this).addClass("is-invalid");
            $("#cn-name").text("نام و نام خانوادگی نمی تواند کمتر از 4 کاراکتر باشد.");
            $("#cn-name").addClass("text-danger");
            state2 = false;
        } else {
            $(this).removeClass("is-invalid");
            $(this).addClass("is-valid");
            $("#cn-name").text("");
            state2 = true;
        }
        if ($(this).val() == "") {
            $(this).removeClass("is-valid");
            $(this).addClass("is-invalid");
            $("#cn-name").text("لطفا نام و نام خانوادگی خود را وارد کنید.");
            $("#cn-name").addClass("text-danger");
            state2 = false;
        }
        return state2;
    });

    $("#mobile").keyup(function () {
        if (mobile_regex.test($(this).val())) {
            $(this).removeClass("is-invalid");
            $(this).addClass("is-valid");
            $("#cn-mobile").text("");
            state3 = true;
        } else {
            $(this).removeClass("is-valid");
            $(this).addClass("is-invalid");
            $("#cn-mobile").text("لطفا یک شماره موبایل درست وارد کنید.");
            $("#cn-mobile").addClass("text-danger");
            state3 = false;
        }
        if ($(this).val() == "") {
            $(this).removeClass("is-valid");
            $(this).addClass("is-invalid");
            $("#cn-mobile").text("لطفا شماره موبایل خود را وارد کنید.");
            $("#cn-mobile").addClass("text-danger");
            state3 = false;
        }
        return state3;
    });

    $("#message").keyup(function () {
        if ($(this).val().length <= 10) {
            $(this).removeClass("is-valid");
            $(this).addClass("is-invalid");
            $("#cn-message").text("متن پیغام نمی تواند کمتر از 10 کاراکتر باشد.");
            $("#cn-message").addClass("text-danger");
            state4 = false;
        } else {
            $(this).removeClass("is-invalid");
            $(this).addClass("is-valid");
            $("#cn-message").text("");
            state4 = true;
        }
        if ($(this).val() == "") {
            $(this).removeClass("is-valid");
            $(this).addClass("is-invalid");
            $("#cn-message").text("لطفا متن پیغام خود را وارد کنید.");
            $("#cn-message").addClass("text-danger");
            state4 = false;
        }
        return state4;
    });

    $("#submit").click(function () {
       $("#contact-form").submit(function (event) {
           event.preventDefault();

       });
    });

Я не знаю, как отправить это. Эта форма должна быть отправлена ​​при отсутствии сообщения об ошибке.

Answer 1

Из того, что я могу сказать, вы сохраняете состояние формы хорошего или плохого в самой разметке.

Полагаю, вы могли бы добавить наблюдателя мутаций в группу форм и следить за тем, чтобы класс is-valid / not valid был переключен.

Если в конечном итоге будет установлено действительное значение, отправьте форму?

Проверьте официальные документы: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver