jQuery validation: function when specific element is valid

I've got a form which is validated onsubmit and onblur with the jQuery Validation plugin. Within the form i've got an element that should be disabled until another element appears valid. So i'm looking for a way to execute a function (remove disabled attr) when a specific element is valid.

The code is listed below.

When #klas is valid, #ll-naam should be enabled. The other way around, when #klas is invalid, #ll-naam should be disabled so users can't place any input.

I've struggled for hours trying to find the right solution, but nor the docs nor google seems to be my friend this time. Is there someone that could help me out?

Thanks in advance!

The 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"
    }
});

The form:

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

jsFiddle example - http://jsfiddle.net/Qgq23/2/

You can use the "highlight" and "unhighlight" methods of jQuery.validate.

With defining a callback to "highlight", you can act when a field is invalid; therefor disabling any other related field. Using "unhighlight", you can act when a field is now valid - and enable any other related field.

From the jQuery.validate manual:

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

Instead of fading out and then fading in an invalid element, you can check the element's name attribute and disable another related field according to the element triggering the highlight event. In the same way, you can define the opposite of this as "unhighlight" and enable the disabled fields according to the field that is now enabled.

My suggestion, btw, would be to add a custom attribute to your input tags that will specify which other fields depend on this one, and enable/disable fields according to that. That way you can minimize the code needed for the highlight/unhighlight events and create a re-usable code for your future forms.

Check the manual for specifics related to your problem.