我有四个输入字段:
MaxWidth
MaxHeight
和
Width
Height
我想验证是否只输入了MaxWidth + MaxHeight
或Width + Height
。用户不应该为两个集提交值。
有什么想法吗?
更新
我正在使用.NET MVC3默认应用程序提供的jquery.validate.min.js
这是我基本上需要验证
<-- Scale a picture to one of the max attributes and keeping the aspect ratio --/>
<input type="text" name="cmdMaxWidth" /><br />
<input type="text" name="cmdMaxHeight" /><br />
<br />
<-- Scale a picture to the exact width and height attributes, still keeping the aspect ratio but addting whitespace for the rest --/>
<input type="text" name="cmdWidth" /><br />
<input type="text" name="cmdHeight" /><br />
更新
我已经重写了我的表单,以反映Mohen在他的答案命令中描述的UI / UX设置。
但我会以“接受”的答案奖励Jayendra Patil,但我会“标记”Mohens的答案和建议
亲切的问候 \ t
答案 0 :(得分:1)
当获得一个值时,您可以轻松禁用其他输入。
例如,您有两个输入:
<input id="width" placeholder="width"/>
<input id="maxwidth" placeholder="max width"/>
并且您希望在用户输入宽度时不允许输入maxwidth。然后你可以这样做:
$('#width').change(function(){
if($(this).val() != ''){
$('#maxwidth').attr('disabled', 'disabled');
}
});
对于宽度和最大宽度,你可以做同样的事情
答案 1 :(得分:0)
您也可以尝试使用依赖性验证 添加一个检查其他两个字段的方法 并使所需的依赖于其他领域。
演示 - http://jsfiddle.net/b3RmV/
cmdMaxWidth字段的示例(ids硬编码,您可以作为参数传递) -
jQuery.validator.addMethod("allowed", function(value, element) {
return !($('#cmdWidth').val().length > 0 || $('#cmdHeight').val().length > 0)
}, "Not allowed");
$(document).ready(function(){
$("#commentForm").validate(
{ rules: {
cmdMaxWidth: {
required: function(element){
return $('#cmdMaxHeight').val().length > 0;
},
allowed: true
}
}
}
);
});