阻止表单上的“提交”

Question

我正在创建一个表单：

<input type="checkbox" id="chk1">1<select name="sel1" id="sel1" class="sel">
  <option value="..."></option>
  <option value="a">a</option>
  <option value="b">b</option>
  <input type="text" name="txt1" id="txt1" class="txt"/><br />
<input type="checkbox" id="chk2">2<select name="sel2" id="sel2" class="sel">
  <option value="..."></option>
  <option value="a">a</option>
  <option value="b">b</option>
  <input type="text" name="txt2" id="txt2" class="txt"/><br/>
<input type="checkbox" id="chk3">3<select name="sel3" id="sel3" class="sel">
  <option value="..."></option>
  <option value="a">a</option>
  <option value="b">b</option>
  <input type="text" name="txt3" id="txt3" class="txt"/><br />
<button type="submit" class="btn btn-default">Submit</button>

我正在尝试在提交按钮上创建一个块，以便在选中复选框时：文本框不能为空，并且下拉列表的值必须不同于“...”如果其中任何一个是这样的，用户点击“提交”，什么都不会发生......如果一切都满意，那么他们点击提交，它就会通过。

我的目标是 Javascript/jQuery 逻辑类似于

if ($(":checkbox:checked").length != 0) {
  if ($(".txt").val === ("")) {
    return false;
  }
  else {return true}
  if ($(".sel").val === "...") {
    return false;
  }
  else {return true}
}

Answer 1

DEMO

首先，我想更正您的html 并在element 组中对每个checkbox、input、select 执行wrap，以便您可以轻松获得其对应的值。您选择了 syntax error 和 select 不是像 <select/> 这样的自关闭 tag，而是 <select>..</select>。因此下面是更新的代码：

<form id="frmDetails">
    <div class="container"> <!--wrap them in each container-->
        <input type="checkbox" id="chk1" value="1"/>
        <select name="sel1" id="sel1" class="sel">
              <option value="0">Select</option>
              <option value="a">a</option>
              <option value="b">b</option>
        </select>
        <input type="text" name="txt1" id="txt1" class="txt"/><br />
    </div>
    <div class="container">
        <input type="checkbox" value="2" id="chk2"/>
        <select name="sel2" id="sel2" class="sel">
             <option value="0">Select</option>
             <option value="a">a</option>
             <option value="b">b</option>
        </select>
        <input type="text" name="txt2" id="txt2" class="txt"/><br/>
    </div>
    <div class="container">
        <input type="checkbox" id="chk3" value="3"/>
        <select name="sel3" id="sel3" class="sel">
              <option value="0">Select</option>
              <option value="a">a</option>
              <option value="b">b</option>
        </select>
        <input type="text" name="txt3" id="txt3" class="txt"/><br />
    </div>
    <button type="submit" class="btn submit btn-default">Submit</button>
</form>

那么你的 js 会如下：

var valid; //A global variable to check the validation
function validate(){
    valid=true; //set it to true at beginning
    $.each($('#frmDetails input:checkbox'),function(){
       //loop through each checkbox
       if($(this).is(":checked")) //if it is checked
       {
           var selected=$(this).siblings('select').find('option:selected').val()
           //get selected value of its select element
           var text=$(this).siblings('input').val();
           //get value entered in its corresponding textbox
           if(text=="" || selected=="0") if text="" or selected value=0
           {
               valid=false;//set valid to false
               return valid;//return it
           }
       }
    });
    return valid; //else this will be true
}

$(".submit").on('click',function(e){
    e.preventDefault(); //prevent default action of submit
    if(validate()) //validate returns true or false
    {
        $("#frmDetails").submit(); //submit the form if valid
    }
    else
    {
        alert('Form is invalid, You cannot submit it');
        //do whatever your want here
    }
});

Answer 2

event.preventDefault() 会为您进行屏蔽。它将阻止表单提交。而不是像原生javascript那样返回false。在cache variable 中收集返回结果，然后在评估为false 时执行event.preventDefault()。

Answer 3

使用 Jquery 阻止表单提交

 $("button[type='submit']").on("click", function(e){
    e.preventDefault();
    if ($(":checkbox:checked").length != 0) {
      if ($(".txt").val === ("")) {
        return false;
      }
      else {$("#myForm").submit();
    }
      if ($(".sel").val === "...") {
        return false;
      }
      else {$("#myForm").submit();}
    }
    });