Question

I am fully prepared to admit that I am missing something simple here. I find that the documentation on the jquery docs page does not really hold all the information needed to make even basic custom validation.

My problem is I need to validate data that isn’t contained within an element so I’ve been using a sort of ‘dummy’ element to try and trigger my custom method.

<div id="modal-dialog-overlay">
<div id="modal-background"></div>
<article id="dialog-form" class="event-module module">
    <header>
        <h6>New Event</h6>
        <section class="module-actions">
            <span class="button" onclick="overlay_select('modal-dialog-overlay', true);">Cancel</span>
            <span class="primary button" onclick="createBEvent()">Create Event</span>
        </section>
    </header>
    <section class="wrapper">
        @using (Html.BeginForm("CreateEvent", "Conversations", FormMethod.Post, new { enctype = "multipart/form-data", id = "createEventForm", @class = "group" }))
        {
            <input id="participantsChecker" type="text" />
            <input class="submit" type="submit" value="Submit"/>
        }
    </section>
</article>
</div>
</div>

And then the javascript bits are

    $.validator.addMethod("checkParticipants", function (value, element) {
        alert($(".event-module .contact-handle [name='Key']").length);
        return $(".event-module .contact-handle [name='Key']").length
    }, "You need to invite at least one person.");
    $("#createEventForm").validate({
        rules: {
            participantsChecker: {
                checkParticipants: true
            }
        }
    });

Which is in the document.onready for the page.
There’s other code on the page that adds the elements that that selector is looking for and those are definitely there. In any case, that alert never appears when the form is submitted. I was testing it by just hitting submit without entering anything at all into the form.

Answer 1

input elements must have a name and that’s how jQuery Validate interacts with them:

<input id="participantsChecker" name="participantsChecker" type="text" />

That should work.