在 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/is not valid 类。

如果最终设置为有效，请提交表单？

查看官方文档： https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver