3

我有一个包含几行 4 个输入字段的表单，它看起来像这样：

<tr>
    <td><input name="company01" id="company01" /></td>
    <td><input name="description01" id="description01" /></td>
    <td><input name="costs01" id="costs01" class="sum" /></td>
    <td><input name="file01" id="file01" /></td>
</tr>

<tr>
    <td><input name="company02" id="company02" /></td>
    <td><input name="description02" id="description02" /></td>
    <td><input name="costs02" class="sum" id="costs02" /></td>
    <td><input name="file02" id="file02" /></td>
</tr>

现在，当用户输入行的输入之一（例如成本字段）时，应该强制输入公司和描述（但不是附件）。

文件上传从来都不是强制性的。但是，用户必须至少填写公司、描述和成本行。

有人可以告诉我如何检查是否至少完成了一行？我将如何检查其他两个是否已使用 jQUery 验证插件完成？

4

4 回答 4

3

可以使用所需的方法和依赖表达式来完成 

....
rules : {
  company01 : { required : "#company02:blank" },
  description01 : { required : "#company01:filled" },
  costs01: { required : "#company01:filled" },
  // now company 2 
  company02 : { required : "#company01:blank" },
  description02 : { required : "#company02:filled" },
  costs02: { required : "#company02:filled" }
}
....
于 2013-02-19T15:14:01.690 回答
1

您可以使用“依赖表达式”使一个字段的规则依赖于另一个字段的状态。

这是一个工作示例...

工作演示：http: //jsfiddle.net/GMK5V/

jQuery :

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        // other options,
        rules: {
            field1: {
                required: true
            },
            field2: {
                required: '#field1:filled'
            }
        }
    });

});

HTML（也添加id到每个input）：

<form id="myform">
    <input type="text" name="field1" id="field1" />
    <input type="text" name="field2" id="field2" />
</form>
于 2013-02-19T16:35:12.000 回答
0

默认情况下，jQuery validate 不会检查禁用的输入。虽然依赖表达式完全符合您在问题中的要求，但我认为值得问问您自己，您的表单是否允许在没有公司名称的情况下进行描述。根据您想要获得的用户体验，最好从禁用描述、成本和文件上传开始，清楚地向用户传达这些字段不能单独使用。然后在 jQuery 验证规则中将它们标记为必需，当它们被启用时，它们是必需的。

诀窍是在添加公司名称时启用它们。我会这样做：

标记

<!-- add a class to the row for ease of dom traversal -->
<tr class="company-row">
    <!-- add a class to the company name for ease of selection -->
    <td><input class="company-name" name="company01" id="company01" /></td>
    <td><input name="description01" id="description01" /></td>
    <td><input name="costs01" id="costs01" class="sum" /></td>
    <td><input name="file01" id="file01" /></td>
</tr>

JavaScript

$(document).ready(function() {
    $('.company-name').on('keyup', function() {
        var $this = $(this);
        if($this.val() != '') {
            $this.parents('.company-row').find('input').removeAttr('disabled');
        } else {
            $this.parents('.company-row').find('input').not('.company-name').attr('disabled', 'disabled');
        }
    });
)}

这应该可以解决问题，但我承认我没有测试过我刚写的任何东西。您还可能会遇到以下情况：有人遗漏了公司描述，尝试提交，获得了该字段的验证消息，删除了公司名称并且验证消息不会消失（他们可能不会消失）能够提交表格）。我刚刚忘记了如何解决这个问题，但笼统的方法是调用.resetform()整个验证器，这将删除任何验证消息。如果您在提交时调用它，那可能会起作用。

于 2013-02-19T15:33:48.960 回答
0

没有用 validate 方法解决它。我所做的是，检查一行中的所有输入，看看它们是空的还是都填满的。如果任何行不匹配，我只需创建一个警报对话框。

不是很好，但至少它完成了验证。

于 2013-05-07T18:41:07.853 回答