how to add multiple rules with different handling on a field with jquery validate

Question

how do i add Form validation, with multiple rules on a single textfield, and a different action depending on the rule

for example, a faq module, with pre-defined questions, the user can save and / or publish his answers.

i have a form, with 1 textarea and 2 buttons 1 button submits the form to save the entered value in the database as draft 1 button submits the form to save and publish the entered value.

<form>
    <input type="hidden" class="answerdraft"/>
    <label class="answerlabel" for="answer">Answer:</label>
    <textarea name="answer" class="answer" rows="8" cols="40"></textarea>
    <input class="submitAnswer" type="submit" value="Save"/>
    <input type="button" class="publishAnswer" value="Save & Publish"/>
</form>

on page load, an existing draft value (if there is one) is displayed inside the textfield, the user should not be able to save, but can publish if the field is empty the user should not be able to save or publish if the field has text, (and different from the existing draft) the user can save and / or publish.

i have been using jquery validate for a while now but mainly with basic validation of required fields and testing a regex for email and such, but its unclear to me how i can manage the above to validate correctly

i have tried it out, (code below) current code: for ease of reading: the question object is the container div where the form is in.

$("textarea.answer", question).validate({
    valid: function(val){
        var answerdraft = $('input.answerdraft', question).val();
        enable_button($('.submitAnswer', question));
        enable_button($('.publishAnswer', question));
        return val != "" && !val.match(/^\s+$/) && (val != answerdraft);
    },
    errorMessage: function(val){
        var answerdraft = $('input.answerdraft', question).val();
        if(val == answerdraft)
        {
            disable_button($('.submitAnswer', question));
            enable_button($('.publishAnswer', question));
        }
        else
        {
            disable_button($('.submitAnswer', question));
            disable_button($('.publishAnswer', question));
        }
        return _t.validationanswerrequired;
    },
    appendCompletionIcon: true
});

This does not entirely what i want, it uses only 1 rule, and then in the error method i test to set the righ tbuttons enabled, but that means that buttons get enabled correctly but the textfield gets the error state sometimes when it does not need to show an error but rather neutral state.

i believe i will need to redo my logic, without doing it inside 1 valid: or error: function, but using the rules option, but its unclear how i can bind the enable / disable functionality to the buttons with the rules object.

anyone to point me in the right direction is very welcome.

Answer 1

I believe i was thinking to complicated, I figured out that all the enabling / disabling of buttons should not be directly bound to a validation rule, because even when the rule fails the data in the field is not technically "invalid"

so i use the jquery validate plugin only to check if the field is not empty if empty buttons should be disabled both, if not empty i just execute a new function that does the logic for checking against the previous entry.

so then if the field value is as the initial value (draft) then only publish button goes enabled else, both may be enabled.

i know this is not really a technical issue that is answered, more like a work around but it is solved now better than it when i would have done it with validate.