Question

I’m using the jQuery form wizard plugin. I have 20 questions that each have three answers. Each answer can have a weight. For each question, the total weight of the answers must be equal to 10.

<fieldset id="first" class="step">
    <input type="text" size="2" maxlength="2" value="" name="question1[]" class="required"/>A: Inspiring others with a compelling vision for change.<br />
    <input type="text" size="2" maxlength="2" value="" name="question1[]" />B: Engaging others to buy-into the change.<br />
    <input type="text" size="2" maxlength="2" value="" name="question1[]" />C: Executing a project plan and managing accountabilities.<br />
    <label for="question1[]" class="error" style="display:none;">Your values must add up to 10!</label>
</fieldset>

This is basically a personality assessment. Let’s say I feel A and C do not apply, I’d enter in 10 for A.

Is there any way to check to see if each field set is adding up to 10 and if not send an error message?

I am using the jQuery validation plugin, but this seems to be a bit too specific, as I know it checks for numbers, etc.

I’ve tried to add something along the following to even get a required check to pass, but I’m not sure where to go from here:

$(document).ready(function() {
    $("#Form").validate({
        submitHandler: function(form) {
            form.submit();
        }
    });
    $("#Form input[name='question1']").each(function() {
        $(this).rules("add", {
            required: true,
            maxlength: 2,
            messages: {
                required: "Required",
                minlength: jQuery.format("Max length of {2} characters.")
            }
        });
    });
});

I have also found that jQuery validate had to have a function edited to accomodate arrays. I’ve changed the following function:

checkForm: function() {
    this.prepareForm();
    for (var i=0, elements=(this.currentElements = this.elements()); elements[i]; i++ ) {
        if (this.findByName(elements[i].name).length != undefined &&
            this.findByName( elements[i].name ).length > 1) {

            for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {
                this.check( this.findByName( elements[i].name )[cnt] );
            }
        }
        else {
            this.check( elements[i] );
        }
    }
    return this.valid();
}

I have also tried this:

$(document).ready(function(){
    $("#Form").validate({
        rules: {
            question1: {
                required: true
            }
        },
        submitHandler: function(form) {
            form.submit();
        }
    });
});

None of this seems to work to even give me a ‘required’ error. There are no errors in console. I need to validate this on each question as the “next” button is pressed. The next button does have type=submit, so it theoretically should at least see that I said question 1 must be required but to no avail.

I also tried this:

$().ready(function() {
    // validate the comment form when it is submitted
    $("#Form").validate({
        rules: {
            "question1[]": "required"
        },
        messages: {
            "question1[]": "Input is required",
        }
    });
});

But it goes on to the next fieldset with no error.

Answer 1

In this case, create a new input that’s disabled, and when the individual weight values change, change the value of this disabled input to be the sum. Validate the disabled input – require it’s value be equal to 10, and if it’s not, show an error.