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

I have five select boxes in HTML. I have to make sure that when the form is submitted these values aren't the same - they all need to be different. I have a Javascript script that gets each value by doing this:

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

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

This should store whatever value the user chose while filling out the script into the variable rankChoice. Since I have five select boxes, I take the first select box and ensure that this box does not have the same value as the others. However I'm having a hard time getting this to stop the form submission - when I did some required fields with Javascript it worked just fine but even when I give an alert and return false, the form seems to submit anyway.

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

Here is a select box example:

这是一个选择框示例:

              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>

The comparison works like so:

比较的工作原理如下:

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

Should I be calling this function onSubmit or onClick? Also, should I call it when the user clicks the form submit button or interacts with the last selection? I saw a few threads saying to redirect back to the page, but I'd like to just prevent submission if possible.

我应该在提交或onClick上调用此函数吗?另外,我应该在用户点击表单提交按钮或与上一个选择进行交互时调用它吗?我看到一些线程说要重定向回页面,但我想尽可能阻止提交。

2 个解决方案

#1

call function onclick() and submit with document.getElementById("myForm").submit(); if true else give error!

调用函数onclick()并使用document.getElementById(“myForm”)提交.remit();如果是真的别的错误!

#2

I'd suggest some jQuery. Specifically jQuery validate. You can add a custom method to jQuery validator to check that your fields aren't equal using the add method function:

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

jQuery.validator.addMethod

jQuery validate will also run as the user enters data into the fields which will allow them to see if there is an error condition before submission.

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

Here is the jQuery validation link: http://jqueryvalidation.org/documentation/

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

and the link to the addMethod function: http://jqueryvalidation.org/jQuery.validator.addMethod/

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

#1