如果选择字段相同，使用 Javascript 防止表单提交？答案

【问题标题】：Using Javascript to prevent form submission if select fields are the same?如果选择字段相同，使用 Javascript 防止表单提交？
【发布时间】：2014-09-17 22:32:10
【问题描述】：

我在 HTML 中有五个选择框。我必须确保在提交表单时这些值不一样——它们都需要不同。我有一个 Javascript 脚本，通过这样做来获取每个值：

var rankCheck = document.getElementById("rank1");
var rankChoice = rankCheck.options[rankCheck.selectedIndex].value;

这应该存储用户在将脚本填写到变量 rankChoice 时选择的任何值。由于我有五个选择框，所以我选择第一个选择框并确保该框与其他框的值不同。但是我很难让它停止表单提交 - 当我使用 Javascript 完成一些必填字段时，它工作得很好，但即使我发出警报并返回 false，表单似乎仍然提交。

这是一个选择框示例：

              Item:
                    <select id="rank1" name="rank" required>
                        <option value=""></option>
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>

比较是这样的：

if(rank1 != rank2 && rank1 != rank3 && rank1 != rank4 && rank1 != rank5) {
    return true;
}
else {
    alert'Some alert') ;
    return false;
}

我应该在 onSubmit 还是 onClick 调用这个函数？另外，当用户单击表单提交按钮或与最后一个选择进行交互时，我应该调用它吗？我看到一些线程说要重定向回页面，但我想尽可能阻止提交。

【问题讨论】：

你试过提交事件的preventDefault吗？喜欢：$('#form').submit(function (evt) { evt.preventDefault();
@LcSalazar 不，还没有尝试过。将如何实施？

标签： javascript php jquery html forms

【解决方案1】：

调用函数 onclick() 并提交 document.getElementById("myForm").submit(); 如果为真，则报错！

【讨论】：

您能否详细说明第二部分？我应该调用函数 onClick() 并将其放在我的提交按钮输入标签中吗？
like:
......

和在 func(){ ...... document.getElementById("myForm").submit(); }

【解决方案2】：

我建议使用一些 jQuery。特别是 jQuery 验证。您可以使用 add 方法函数向 jQuery 验证器添加自定义方法来检查您的字段是否不相等：

jQuery.validator.addMethod

jQuery validate 也将在用户将数据输入到字段中时运行，这将允许他们在提交之前查看是否存在错误情况。

这里是 jQuery 验证链接： http://jqueryvalidation.org/documentation/

以及 addMethod 函数的链接： http://jqueryvalidation.org/jQuery.validator.addMethod/

【讨论】：