jQuery validation: function when specific element is valid

Question

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>

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 8, 2011 at 15:34

dvir

5,1241 gold badge25 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dennis Hunink Over a year ago

Thanks Dvir. Frankly it didn't work out. Although it seems logical to use unhighlight to execute a function when the element is valid, the functions now is executed anyway, valid of invalid. See the code below. Your suggestion is very welcome, but could you be a little bit more precise? Think I'm not getting what you're suggesting. unhighlight: function(element, errorClass) { if(element == '#klas'){ $('#ll-naam').removeAttr("disabled"); $("#ll-naamErrorLabel").hide(); $('#ll-naam').focus(); } }

dvir Over a year ago

@DennisHunink, the element you are getting isn't the ID of the element, it's the jQuery object of the element. if you want to get the ID of it, you should try if (element.attr("id") == "klas") { }

dvir Over a year ago

@DennisHunink, check out the top of my answer again, I added a jsFiddle example with a stripped down version of your validation process. (jsfiddle.net/Qgq23/2)

Dennis Hunink Over a year ago

Wooh, that did the trick! Thanks so much! I really apreciead that you took the time to create the example; that pointed out my mistakes very well, which gives me the opurtiounitie to learn from them. Thanks a lot!

Collectives™ on Stack Overflow

jQuery validation: function when specific element is valid

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related