我花了好几个小时尝试使用自定义验证器方法进行以下验证:
用户可以选择两个下拉菜单:
我想要实现的目标:
验证器不应允许用户为位置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",
}
}
});
});
答案 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;
}
});
干杯!