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

这是我写的一些代码，我试图使其尽可能地动态。与其单击，不如点击if (Directory.GetFiles(folderpath).Length > 0) { String name = FileUpload1.FileName; //provide file path, the name of file, then grab info of file FileInfo file = new FileInfo(folderpath + FileUpload1.FileName); //testing if we retrieved info Label1.Text = ("Name :" + file.Name + "<BR/>" + "Size :" + file.Length + "<BR/>" + "Modified :" + file.LastWriteTime + "<BR/>"); string[] allfiles = Directory.GetFiles(folderpath, "*"); grdFile.DataSource = allfiles; grdFile.DataBind(); }，但它确实对您有利。

确保也查看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;
}

Answer 2

好吧，这就是步骤按照我自己的方式工作的方式。.这里的想法是第一种形式是主要形式，第二种形式是仅供用户使用，而不是用于编程..这意味着第一种形式将具有所有必填字段然后我将隐藏字段并使用来自伪造表单

的javascript对其进行控制

我创建了两种形式，一种是主要形式，第二种是伪造形式
我以一种主要形式添加了一个隐藏的复选框
我为每种表单分别设置提交事件
我为假复选框创建了一个更改事件，以控制主表单中的主复选框

$(document).ready(function(){
  // Main Form Submit
  $("#mainForm").on("submit" , function(e){
    e.preventDefault();
    if($("#mainCheck").is(":checked")){
      alert("First Form is Submitted correctly");
    }else{
      //alert('Show Modal With Form');
      $("#fakeForm").show();
    }
  });
  // Fake form in Modal submit
  $("#fakeForm").on("submit" , function(e){
    e.preventDefault();
    if($("#fakeCheck").is(":checked")){
      $("#mainForm").submit();
    }else{
      alert("Please Accept our policies first");
    }
  });
  // fake checkbox to change main checkbox
  $("#fakeCheck").on("change" , function(){
    $("#mainCheck").prop("checked" , this.checked);
  });
});

#mainForm, #fakeForm{
  background : #eee;
  border : 5px solid #555;
  margin : 20px;
  padding : 20px;
}
#mainCheckLabel,#fakeForm{
  display : none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- first Form -->
<form id="mainForm">
  <label class="form-label" for="firstname">First name:</label>
  <input class="form-input" required type="text" name="firstname" id="firstname" value="firstname" />
  <br/>
  <label id="mainCheckLabel"><input type="checkbox" id="mainCheck"/>Accept to our policies</label>
  <button type="submit">Submit First Form</button>
</form>
<!-- End First Form -->

<!-- Second Form in Modal -->
<form id="fakeForm">
  <label id="fakeCheckLabel"><input type="checkbox" id="fakeCheck"/>Accept to our policies</label>
  <button type="submit">Submit Second Form</button>
</form>
<!-- End Second Form in Modal -->

注意在主表单中隐藏#mainCheckLabel

如何使用[required]选择器的示例

$('input[required]').css('border' , '1px solid red');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" required placeholder="First Name"/>
<input type="text" placeholder="Last Name"/>

Answer 3

以下解决方案对我有用：

$("#uploadBtn").click(function() {
  var form_data = new FormData($("#data-uploader-form")[0])
  if ($("#data-uploader-form")[0].checkValidity()) {
    alert("valid form")
  } else {
    alert("incorrect form")
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id='data-uploader-form' onsubmit='return false;'>
  <div class="form-group row">
    <label>Input field</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="testInputField" placeholder="some text" required="required">
    </div>
  </div>
  <div class="form-group row">
    <label class="col-12 col-lg-3 col-form-label"></label>
    <div class="col-12 col-lg-6">
      <button type="submit" class="btn btn-primary float-left" id="uploadBtn">Submit</button>
    </div>
  </div>
</form>

jQuery检查模式弹出之前是否需要表单字段

3 个答案: