jQuery条件表单验证

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

我将使用“验证”插件并编写自己的验证方法-如下所示：

 $.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 个解决方案

解决方案1
0 2014-06-24 09:27:56

解决方案2
0 2014-06-24 09:28:35

解决方案3
0 已采纳 2014-06-24 10:02:45

jQuery条件表单验证

问题描述

3 个解决方案

解决方案1 0 2014-06-24 09:27:56

解决方案2 0 2014-06-24 09:28:35

解决方案3 0 已采纳 2014-06-24 10:02:45

解决方案1
0 2014-06-24 09:27:56

解决方案2
0 2014-06-24 09:28:35

解决方案3
0 已采纳 2014-06-24 10:02:45