Question

我有一个使用jQuery Validation插件在onmit和onblur上验证的表单。在表单中，我有一个元素应该被禁用，直到另一个元素出现有效。所以我正在寻找一种在特定元素有效时执行函数（删除禁用的attr）的方法。

下面列出了代码。

当 #klas 有效时，应启用 #ll-naam 。反过来说，当 #klas 无效时，应禁用 #ll-naam ，这样用户就无法输入任何内容。

我努力寻找合适的解决方案已经挣了好几个小时，但这次的文档和谷歌似乎也不是我的朋友。有人可以帮助我吗？

提前致谢！

jQuery：

$("#newAp").validate({               
    validClass: 'succes',
    ignore: '#opmerking',
    errorContainer: '#newap-error',
    rules: {
        docent: {
            required: true,
            minlength: 4,
            remote: "handlers/validationInSqlArray.php"
        },
        'vak': {
            required: true,
            remote: "handlers/validationInSqlArray.php"
        },
        'klas': {
            required: true,
            remote: "handlers/validationInSqlArray.php",
            valid: function(element){
                $('#ll-naam').removeAttr("disabled");
                $("#ll-naamErrorLabel").hide();
                $('#ll-naam').focus();
            }
        },
        'll-naam': {
            required: true
        },
        'datum': {
            required: true
        }
    },
    messages: {
        docent: {
            required: "Vul uw achternaam in",
            remote: "Alleen namen uit de suggestielijst zijn toegestaan",
            minlength: jQuery.validator.format("Vul minimaal {0} tekens in."),
        },
        vak:  {
            required: "U dient een vak in te vullen",
            remote: "Alleen vakken uit de suggestielijst zijn toegestaan",
        },
        klas: {
            required: "Vul een klas in",
            remote: "Alleen klassen uit de suggestielijst zijn toegestaan"
        },
        'll-naam': "Voer de naam van de leerling in",
        datum: "Selecteer een terugkomdatum"
    }
});

表格：

<form method="post" action="" id="newAp" class="form">
    <div class="alert alert-error" id="newap-error">
        <p>Corrigeer de rood gemarkeerde velden</p>
    </div>
    <h2 class="form-title">Leerling aanmelden</h2>
    <label for="docent">Docent</label>
    <input type="text" name="docent" id="docent" placeholder="Vul uw achternaam in"/>

    <label for="vak">Vak</label>
    <input type="text" name="vak" id="vak" placeholder="Vul de naam van het vak in"  />

    <label for="klas">Klas (stamgroep)</label>
    <input type="text" name="klas" id="klas" placeholder="Klas van de leerling" value="" />

    <label for="ll-naam">Leerling</label>
    <input type="text" name="ll-naam" id="ll-naam" placeholder="Naam van de leerling" disabled />
    <label class="error" id="ll-naamErrorLabel">Vul eerst de klas in</label>

    <label for="opmerking">Opmerking</label>
    <textarea name="opmerking" name="opmerking" placeholder="Opmerking voor de surveillant."> </textarea>
    <input type="hidden" name="opmerking_ph" value="Opmerking voor de surveillant." />

    <label for="date">Terugkom datum</label>
    <input type="text" name="datum" id="datum" readonly='true' placeholder="Klik om datum te selecteren" />

    <input type="submit" class="submit" value="Opslaan" />

</form>

Answer 1

jsFiddle示例 - http://jsfiddle.net/Qgq23/2/

您可以使用jQuery.validate的“highlight”和“unhighlight”方法。

通过将回调定义为“突出显示”，您可以在字段无效时执行操作;因此禁用任何其他相关领域。使用“unhighlight”，您可以在字段现在有效时执行操作 - 并启用任何其他相关字段。

来自jQuery.validate manual：

$(".selector").validate({
  highlight: function(element, errorClass) {
     $(element).fadeOut(function() {
       $(element).fadeIn();
     });
  }
})

您可以检查element的name属性，并根据触发突出显示事件的元素禁用其他相关字段，而不是淡出然后淡入无效元素。同样，您可以将其定义为“unhighlight”，并根据现在启用的字段启用禁用的字段。

我的建议，顺便说一句，就是在输入标记中添加一个自定义属性，指定哪个其他字段依赖于此字段，并根据该字段启用/禁用字段。这样，您可以最小化突出显示/取消突出显示事件所需的代码，并为将来的表单创建可重用的代码。

查看手册以了解与您的问题相关的细节。

jQuery验证：特定元素有效时的函数

1 个答案: