javascript - Jquery 在模式弹出之前检查表单字段是否需要

Question

您好，有一个包含两个提交按钮的表单:

(按钮2)用户单击提交按钮，会出现一个模式弹出窗口，模式中是他们必须接受的一些条款和条件，(按钮1)一旦他们单击“接受”，第二个提交按钮就会进行表单提交。

有些必填表单字段在按下第一个按钮后不会显示(必填)，只会弹出模式窗口，我该如何实现这一点？我的 Jquery 代码是:

        $(document).ready(function () {
            $("#login-form button").click(function (ev) {
                ev.preventDefault()
                if ($(this).attr("value") == "button1") {
                    // alert("First Button is pressed")
                    $("#login-form").submit();
                }
                if ($(this).attr("value") == "button2") {
                    $(".modal").addClass("active");
                }
            });
        });

表单字段是:

<label class="form-label" for="firstname">First name:</label>
<input class="form-input" required type="text" name="firstname" id="firstname" value="firstname>

有什么想法吗？

Answer 1

这是我编写的一些代码，我尝试使其尽可能动态。您应该使用 onchange 而不是点击，但这实际上取决于您。

请确保也查看validationType

$("input[type='button']").click(function(){
if ($(this).hasClass("disable"))
return false;

if ($(this).hasClass("validate")){
var errors = [];
// all required input that need validation
var input = $(this).parent().find("input[type='text'][required='required']");
input.each(function(){
var vType= $(this).attr("validationType");
var value =$(this).val(); 
var fName =$(this).attr("placeholder"); 
switch(vType){
case "notEmpty":
if (!value || value== "")
  errors.push(fName +" cant be empty");
break;
}
});
if (errors.length>0){
  $(this).parent().find(".submit").addClass("disable");
   alert(errors)
   }
   else {
     $(this).parent().find(".submit").removeClass("disable");
   }

}else return true; // submit the form

});

input[required="required"]{
border:1px solid red;
}

.disable{
 color:#CCC;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" validationType="notEmpty" required="required" value="" placeholder="firstName" />
<input type="button" class="validate" value="button 1" />

<input type="button" class="submit disable" value="button 2" />

</form>