Question

我一直在寻找StackOverflow和其他一些网站，以获得有关表单字段条件验证的帮助。大多数问题都与复选框有关，但我的问题是选择字段。

我已经部署了jQuery和jQueryUI，并且所有这些都在这方面正常工作。我没有安装jQuery Validate，因为我认为没有它可以实现，但是很高兴被告知。这是问题所在：

如果用户选择“打开”，则需要“dateOpened”字段。如果他们选择“关闭”，则需要“dateClosed”。

<form action="" method="post">
<select name="select12" id="select12">
  <option>Select...</option>
  <option value="1">Open</option>
  <option value="2">Closed</option>
</select>

<input name="dateOpened" id="dateOpened" type="text" />
<input name="dateClosed" id="dateClosed" type="text" />

<input name="submit" type="submit"  value="update"/>
</form>

有人可以建议最好的解决方案吗？

由于尼克

Answer 1

试试这个

$('#select12').on('change',function() {
  if($(this).val()=="1") {
    $('#dateOpened').prop('required',true);
    $('#dateClosed').removeAttr('required');
  }
  if($(this).val()=="2") {
    $('#dateClosed').prop('required',true);
    $('#dateOpened').removeAttr('required');
  }
}

Answer 2

我会使用＆＃34;验证＆＃34;插件并编写我自己的验证方法 - 如下所示：

 $.validator.addMethod("dateValMethod", function (value, element) {
    var valid = false;
    if ((value== 1 && value_of_dateOpened_not_empty) || (value== 2 && value_of_dateClosed_not_empty)) {
        valid = true;
    }
    return valid;
 }, "Please blah blah blah...");

Answer 3

这是代码，希望它有所帮助 -

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $( "#update" ).click(function() {
    var abc = $( "#select12" ).val();
    if ( abc == "1" ) {
        var open = $("#dateOpened").val();
        alert(open);
        }
    else { 
        var close = $("#dateClosed").val();
        alert(close);
        }
    });
});
</script>
</head>

<body>
<select name="select12" id="select12">
    <option>Select...</option>
    <option value="1">Open</option>
    <option value="2">Closed</option>
</select>
<input name="dateOpened" id="dateOpened" type="text" />
<input name="dateClosed" id="dateClosed" type="text" />
<input name="submit" type="submit" id="update"  value="update"/>
</form>
</body>
</html>

jQuery条件表单验证

3 个答案: