jquery - 在提交验证

Question

我需要帮助提交一个表单，其中我有检查电子邮件是否存在于下拉列表中，同时提交它显示警报消息的表单但也提交表单，当没有显示警报消息时，只需要提交表单

$(document).on('click', '#Records', function (event) {
    $("#dropval select option:selected").each(function () {
        var z = $(this).val();
        //alert(z);
        if(z != 'email') {
            alert('please select Email');
            e.preventDefault();
            return false;
        } else {
            return true;
        }
    });
});
});

   <form  name="search" method="post" action="sample1.php" >
  <div id="dropval">

  <select name="select3[1]" class="mySelects" >
  <option value="None"  selected > None</option>
  <option value="email" >email</option>
  <option value="firstname" >firstname</option>
  <option value="lastname" >lastname</option>
  <option value="mobile" >mobile</option>
  </select>
  <select name="select3[2]" class="mySelects" >
  <option value="None" selected > None</option>
  <option value="email" >email</option>
  <option value="firstname" >firstname</option>
  <option value="lastname" >lastname</option>
  <option value="mobile" >mobile</option>
  </select>
  <select name="select3[3]" class="mySelects" >
  <option value="None" selected > None</option>
  <option value="email" >email</option>
  <option value="firstname" >firstname</option>
  <option value="lastname" >lastname</option>
  <option value="mobile" >mobile</option>
  </select>
  <select name="select3[4]" class="mySelect" >
  <option value="None"  selected> None</option>
  <option value="email" >email</option>
  <option value="firstname" >firstname</option>
  <option value="lastname" >lastname</option>
  <option value="mobile" >mobile</option>
  </select>
  </div>
  <input type="submit" value="submit" id="Records">
  </form>

Answer 1

如果您在表单提交而不是按钮单击上调用您的函数，它应该可以解决您的问题，因为此处返回 false 会阻止表单提交。

$('#formName').on('submit', function() {
    //Validation code here
    if(valid == false) {
        return false; //Stops the form from submitting
    } else {
        return true; //Allows the form to submit
    }
});

Answer 2

$(document).on('click', '#Records', function(event) {
    $("#dropval select option:selected").each( function (){
        var z = $(this).val();
        //alert(z);
        if(z!='email'){
            alert('please select Email');
            event.preventDefault(); // 'e' was undefined before, as you named your variable 'event'. This would have been causing an error and code below would not have been executed - as a result, your form would have been submitted after the alert.
            return false;
        }
     });
});

附带说明一下，将事件绑定到document诸如此类click是低效的。尝试将其绑定到更亲近的父级。

Answer 3

试试这个：

$('#formy').bind('submit', function(event){
    var success = false;

    $("#dropval select option:selected").each(function () {
        var z = $(this).val();
        if(z == 'email') {
            success = true;
        }
    });

    return success;
});

您在循环中返回，这不会对提交做任何事情。