JS - 有效提交表单

Question

在有效提交表单后，我需要帮助实现bootstrap模式弹出窗口。该脚本能够验证表单，但我在显示＆＃34;引导模式弹出窗口时遇到困难;感谢您提交案例＆＃34;。

我尝试过使用下面的代码，但似乎没有用。我能够在网站的其他部分显示模式，但不知道如何只显示所有其他字段是否有效。如果它们无效则会显示＆＃34; X＆＃34;它旁边，如果它们显示一个复选标记。

// $('.notification').addClass('modal');
    // $('#notification-text').html("Thanks for contacting us!")                           

HTML

            <div class="container-contact100">
              <div class="wrap-contact100">
                <form class="contact100-form validate-form">
                  <!--Name-->
                  <div class="wrap-input100 validate-input bg1" data-validate="Please Provide A Name">
                    <span class="label-input100">Name *</span>
                    <input class="input100" type="text" name="name" placeholder="Enter Your Name">
                  </div>
                  <!--include name with case-->
                  <div class="wrap-input100 input100-select bg1">
                    <span class="label-input100">Include Name With Case *</span>
                    <div>
                      <select class="js-select2" name="service">
                        <option>Yes</option>
                        <option>No</option>
                      </select>
                      <div class="dropDownSelect2"></div>
                    </div>
                  </div>
                  <!--email-->
                  <div class="wrap-input100 validate-input bg1 rs1-wrap-input100" data-validate = "Please use a valid email address.">
                    <span class="label-input100">Email *</span>
                    <input class="input100" type="text" name="email" placeholder="Enter Your Email">
                  </div>
                  <!--category-->
                  <div class="wrap-input100 validate-input bg1 rs1-wrap-input100" data-validate = "Please Provide A Category">
                    <span class="label-input100">Category *</span>
                    <input class="input100" type="text" name="category" placeholder="Category">
                  </div>
                  <!--court type-->
                  <div class="wrap-input100 validate-input bg1 rs1-wrap-input100" data-validate = "Please Provide A Court Type">
                    <span class="label-input100">Court Type *</span>
                    <input class="input100" type="text" name="court_type" placeholder="Court Type">
                  </div>
                  <!--case title-->
                  <div class="wrap-input100 validate-input bg1 rs1-wrap-input100" data-validate= "Please Provide A Case Title">
                    <span class="label-input100">Case Title *</span>
                    <input class="input100" type="text" name="case_title" placeholder="Case Title">
                  </div>
                  <!--question-->
                  <div class="wrap-input100 validate-input bg0 rs1-alert-validate" data-validate = "Please Provide A Question">
                    <span class="label-input100">Question *</span>
                    <textarea class="input100" name="question" placeholder="Question..."></textarea>
                  </div>
                  <!--ruling-->
                  <div class="wrap-input100 input100-select bg1">
                    <span class="label-input100">Ruling *</span>
                    <div>
                      <select class="js-select2" name="ruling">
                        <option>For</option>
                        <option>Against</option>
                      </select>
                      <div class="dropDownSelect2"></div>
                    </div>
                  </div>
                  <!--ruling reason-->
                  <div class="wrap-input100 validate-input bg0 rs1-alert-validate" data-validate = "Please Provide A Ruling Reason">
                    <span class="label-input100">Ruling Reason *</span>
                    <textarea class="input100" name="ruling_reason" placeholder="Ruling Reason..."></textarea>
                  </div>
                  <!--source-->
                  <div class="wrap-input100 validate-input bg1" data-validate="Please Provide A Source">
                    <span class="label-input100">Source *</span>
                    <input class="input100" type="text" name="source" placeholder="Enter Your Source">
                  </div>
                  <!--submit-->
                  <div class="container-contact100-form-btn">
                    <button class="contact100-form-btn">
                      <span>
                        Submit
                      </span>
                    </button>
                  </div>
                </form>
              </div>
            </div>

JS

（function（$）{     ＆＃34;使用严格的＆＃34 ;;

/*==================================================================
[ Validate after type ]*/
$(".validate-input .input100").each(function() {
    $(this).on("blur", function() {
        0 == validate(this) ? showValidate(this) : $(this).parent().addClass("true-validate")
    })
});

/*==================================================================
[ Validate ]*/
var input = $(".validate-input .input100");

function validate(a) {
    if ("email" == $(a).attr("type") || "email" == $(a).attr("name")) {
        if (null == $(a).val().trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/)) return !1
    } else if ("" == $(a).val().trim()) return !1
}

function showValidate(a) {
    var t = $(a).parent();
    $(t).addClass("alert-validate"), $(t).append('<span class="btn-hide-validate">&#xefb8;</span>'), $(".btn-hide-validate").each(function() {
        $(this).on("click", function() {
            hideValidate(this)
        })
    })
}

function hideValidate(a) {
    var t = $(a).parent();
    $(t).removeClass("alert-validate"), $(t).find(".btn-hide-validate").remove()
}
$(".validate-form").on("submit", function() {
    for (var a = !0, t = 0; t < input.length; t++) 0 == validate(input[t]) && (showValidate(input[t]), a = !1);
    return a
    // $('#notification-text').html("Thanks for submitting a form!")
}), $(".validate-form .input100").each(function() {
    $(this).focus(function() {
        hideValidate(this), $(this).parent().removeClass("true-validate")
    })

});

}）（jQuery的）;