jQuery 条件表单验证答案

【问题标题】：jQuery Conditional Form ValidationjQuery 条件表单验证
【发布时间】：2014-06-24 09:07:15
【问题描述】：

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

我已经部署了 jQuery 和 jQueryUI，并且在这方面一切正常。我没有安装 jQuery Validate，因为我认为没有它就可以实现，但很高兴被告知否则。问题来了：

如果用户选择“open”，则需要“dateOpened”字段。如果他们选择“关闭”，则需要“日期关闭”。

<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>

谁能建议最好的解决方案？

谢谢尼克

【问题讨论】：

您的验证脚本在哪里？或者你想要输入字段的必需属性吗？
这样的？ jsfiddle.net/8T3Tj/2 我不想将其发布为答案，因为您已经使用 JQuery 验证，而且我不确定您当前的验证过程...但是，这是一些基本逻辑...

标签： jquery validation

【解决方案1】：

这里是代码，希望对你有帮助 -

<!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>

【讨论】：

完美 - 只需将 && $("#dateOpened").val()=='' 添加到第一个并使用不同的 ID 复制到 if 语句的第二个，它就可以完美运行。谢谢。

【解决方案2】：

试试这个

$('#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');
  }
}

【讨论】：

【解决方案3】：

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

 $.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...");

【讨论】：