动态形式的验证 - 在满足所有条件之前进行

Question

我已经创建了一个表单，我正在尝试为一组“双重”动态的选择字段添加验证 - 也就是说，根据用户输入，可能有 x 个组和 y 个在每个中选择字段。每个选择字段都需要一个答案。

我遇到的问题是，如果回答的选择字段少于现有的总数，则表单能够进入下一页 - 如果我没有回答任何选择字段，则验证工作完美，但即使有人回答，我仍然会收到警报，但表格仍会继续下一步。这是代码示例（“未更改”是我在选择中为占位符选项提供的值）：

 $(".species_select").each(function(){        
       if (this.value === "unchanged"){
         alert("Please select the species")
       }

       else{
          PROCEED...
       };

从概念上讲，我理解为什么会发生这种情况 - 条件至少满足一次并导致表单继续进行。对于具有固定数量字段的表单，我会使用 ||在所有需要验证的字段之间进行验证，但在这种情况下不会发生。

也许我在这里的方法是完全错误的......基本上，我需要表单来处理它，就好像它不能继续，直到每个 .species_select 都具有“未更改”以外的值。

我们非常感谢您的想法和专业知识。

Answer 1

尝试通过以下方式使用 a 标志：

var proceed = true;
$(".species_select").each(function() {        
    if (this.value === "unchanged") {
    alert("Please select the species");
    proceed = false;
    }
});
if (proceed) {
    // PROCEED...
}

Answer 2

您需要使用preventDefault()取消提交表单：

$( "#myformID" ).submit(function( e) {
    $(".species_select").each(function(){        
        if (this.value === "unchanged"){
            e.preventDefault();
            alert("Please select the species")
        }
        else{
          PROCEED...
       };  
});