Question

我有两个选择框，我不希望用户在两者中选择相同的值。

我已尝试在堆栈上提出一些解决方案，但物化选择与“正常选择”不同，因为它包含列表项元素中的选项。

然而，我提出了一个解决方案，这个解决方案很优雅，我知道......对于这些事情来说，这是一个新手。

但它没有像我预期的那样工作。我想为jquery验证插件创建一个额外的方法，在小提琴的例子中，我插入了一个额外的字段来显示错误的位置。我认为很简单，但我无法弄清楚如何做到这一点......

  $.validator.addMethod("checksameval", function(value, element) {
  return $('#pref1').val() == $('#pref2').val()
}, "Pref1 and Pref2 cant have same value!");

https://jsfiddle.net/L24otmaa/5/

使用自定义方法编辑（仍无法正常工作..）

Answer 1

您的解决方案的问题是表单仍然有效，因此无论如何都可以发送它。

您必须添加自定义验证。该插件提供回调，您可以在最终提交之前检查所需内容。这可以通过将验证添加到自定义提交处理程序

来完成

 var isSameValue = function() {
      var val1 = $('#pref1').val();
      var val2 = $('#pref2').val();
      if (val1 == val2) {
        $customErrorDiv.text('error you cant select same value twice!!');
        return true;
      } 
      $customErrorDiv.text('');
      return false;
  }

 // check also on runtime
 $('.course').change( function() {
     isSameValue();
  });

 $("#application").validate({
    // check before submitting
    submitHandler: function(form) {
       if (isSameValue()) {
          return;
        }
        // submit the form manually
        form.submit();
     }
});

小提琴：https://jsfiddle.net/7uhkddrx/

文档：https://jqueryvalidation.org/validate/

当然，您必须根据自己的需要设定此信息的样式。

编辑：顺便说一句：目前您的选择框未设置为必需。

EDIT2：添加了对运行时的检查

比较materializecss框架中两个select的重复值

1 个答案: