使用JQuery Validator

时间:2018-01-29 02:04:14

标签: javascript jquery validation

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

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

  1. 当前位置(当前用户所在的位置)
  2. 目的地(用户打算去的地方)
  3. 我想要实现的目标:
    验证器不应允许用户为位置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",
            }
        }
    
      });
    });
    

1 个答案:

答案 0 :(得分: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;
    }
});

干杯!