Question

I’m trying to set up some basic jQuery validation, but nothing seems to be working. When I run the page and hit submit, the first textbox gets highlighted, but the message for the second textbox gets displayed in the summary. If click in and out of the second textbox, both boxes get highlighted, but the message for the second box is displayed, twice. Subsequently clicking the submit button causes the second message to display while the button is being pressed, but then hides when the button is released.

Clearly I’ve set something critical up incorrectly, but I can’t for the life of me see what.

Form:

<form id="formInput">    
    Some Input  <input type="text" id="someInput1" />
    Some Input2 <input type="text" id="someInput2" />

    <input id="btnSubmit" type="submit" />    
</form>

Code (which is run from within the document.ready handler):

$('form').validate({
    highlight: function (element, errorClass) {
        $(element).addClass("invalidElement");
    },
    unhighlight: function (element, errorClass) {
        $(element).removeClass("invalidElement");
    },
    errorClass: "errorMsg",
    errorContainer: '#errorSummary',
    errorLabelContainer: '#errorsList',
    wrapper: 'li',
    onkeyup: false,
    focusCleanup: false
});

$("#someInput1").rules("add", {
    required: true,
    messages: {
        required: "Some input 1 is required"
    }
});

$("#someInput2").rules("add", {
    required: true,
    messages: {
        required: "Some input 2 is required"
    }
});

Answer 1

The problem with the code above is that the jQuery validation plugin requires all inputs to have names.

Adding

name="X" 
name="Y"

to the two text boxes fixed matters.

Some Input  <input type="text" name="X" class="someInput1" />
Some Input2 <input type="text" name="Y" class="someInput2" />