javascript - 使用 JQuery Validator 基于两个下拉列表的条件验证

Question

我花了几个小时尝试使用自定义验证器方法实现以下验证:

用户可以选择两个下拉菜单:

1. 当前位置(用户当前所在的位置)
2. 目的地(用户打算去的地方)

我想要实现的目标:
验证器不应允许用户为两个下拉菜单选择除位置 1 之外的相同位置。

例如:
用户可以选择他要从位置 1 到位置 1。(可以旅行到这个位置的不同地方，因为这个位置很大)。

但他不能选择他要去的地方:
位置 2 到位置 2。
位置 3 到位置 3。
位置 4 到位置 4。
位置 5 到位置 5。
这些位置在同一位置没有不同的地方。

他可以从位置 1 到任何其他位置，反之亦然，或者可以从位置到位置，即位置 3 到位置 4。

你能帮我解决这个问题吗？到目前为止我所做的很差，甚至没有工作。自定义方法不起作用，我需要添加规则和消息，但不知道如何。

在此先感谢您的帮助!

到目前为止我做了什么:

HTML

<form id="rideForm" action="#">
<select id="3" name="currentLocation">
     <option value ="" class="inputDefault">Select Location</option>
          <option value="Location1">Location 1</option>
          <option value="Location2">Location 2</option>
          <option value="Location3">Location 3</option>
          <option value="Location4">Location 4</option>
          <option value="Location5">Location 5</option>
</select>

<select id="4" name="destination">
     <option value ="" class="inputDefault">Select Destination</option>
          <option value="Location1">Location 1</option>
          <option value="Location2">Location 2</option>
          <option value="Location3">Location 3</option>
          <option value="Location4">Location 4</option>
          <option value="Location5">Location 5</option>
</select>
</form

JS/JQuery 代码

$(document).ready(function() {
    $.validator.addMethod("validSelection", function(value, element) {
        if ($('select[name="currentLocation"]').val() == $('select[name="destination"]').val()) {
            return true;
      } else {
            return false;
    }
});


("#rideForm").validate(
{
    rules: 
    {   
        currentLocation:
        {
            required: true,
            // validSelection: true
        },

            destination: 
            {
                required: true,
            // validSelection: true
        }
    },



    messages: {
        currentLocation: {
            required: "Please select your current location",
        },


        destination: {
            required: "Please select a destionation",
        }
    }

  });
});

Answer 1

我刚刚解决了这个问题。

这是自定义验证器方法，用于验证上面为任何执行类似操作的人所描述的内容:

$(document).ready(function() {
    $.validator.addMethod("validSelection", function(value, element) {
        if ($('select[name="currentLocation"]').val() == "Location2" && $('select[name="destination"]').val() == "Location2") {
        return false;
    }
    else if ($('select[name="currentLocation"]').val() == "Location3" && $('select[name="destination"]').val() == "Location3") {
        return false;
    }
    else if ($('select[name="currentLocation"]').val() == "Location4" && $('select[name="destination"]').val() == "Location4") {
        return false;
    }
    else if ($('select[name="currentLocation"]').val() == "Location5" && $('select[name="destination"]').val() == "Location5") {
        return false;
    } else {
        return true;
    }
});




$("#rideForm").validate(
{
    rules: 
    {
        currentLocation:
        {
            required: true,
        },

        destination: 
        {
            required: true,
            validSelection: true,

        }
    },

    messages: {

        currentLocation: {
            required: "Please enter your current location"
        },
        destination: {
            required: "Please enter a destionation",
            validSelection: "You cannot complete such a trip."
        }
    }
});

});

编辑:
我进一步简化了验证器方法代码。您可以改用它:

$.validator.addMethod("validSelection", function(value, element) {
    if ($('select[name="currentLocation"]').val() == "Location1" && $('select[name="destination"]').val() == "Location1") {
        return true;
    }
    else if ($('select[name="currentLocation"]').val() == $('select[name="destination"]').val() ) {
        return false;
    } else {
        return true;
    }
});

干杯!