Question

我在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上调用此函数吗？另外，当用户点击表单提交按钮或与上一个选择进行交互时，我应该调用它吗？我看到一些帖子说要重定向回页面，但我想尽可能阻止提交。

Answer 1

调用函数onclick（）并提交的document.getElementById（＆＃34; myForm的＆＃34）。提交（）; 如果是，否则给出错误！

Answer 2

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

jQuery.validator.addMethod

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

以下是jQuery验证链接： http://jqueryvalidation.org/documentation/

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

如果选择字段相同，使用Javascript来阻止表单提交？

2 个答案: