jQuery 验证 : function when specific element is valid

Question

我有一个表单，它通过 jQuery 验证插件进行了 onsubmit 和 onblur 验证。在表单中，我有一个元素应该被禁用，直到另一个元素出现有效为止。所以我正在寻找一种在特定元素有效时执行函数(删除禁用的属性)的方法。

下面列出了代码。

当#klas有效时，应启用#ll-naam。相反，当 #klas 无效时，应禁用 #ll-naam，以便用户无法进行任何输入。

我花了几个小时努力寻找正确的解决方案，但这次文档和谷歌似乎都不是我的 friend 。有人可以帮助我吗？

提前致谢!

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 的“突出显示”和“取消突出显示”方法。

通过定义“突出显示”回调，您可以在字段无效时采取行动；因此禁用任何其他相关字段。使用“取消突出显示”，您可以在字段有效时采取行动 - 并启用任何其他相关字段。

来自jQuery.validate manual :

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

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

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

查看手册以了解与您的问题相关的具体信息。