Why does the jQuery valid () method always return True?

Question

I have a simple HTML form:

<form id="frmNewCategory"> <span>New Category Name:</span> <input type="text" id="txtNewCategoryName"> <label>Amount:</label> <input type="text" id="txtNewCategoryAmount"> <br> <input type="submit" value="Create" class="importantButton button" id="btnNewCategory"> <input type="button" value="Cancel" class="button" id="btnCancelNewCategory"> </form> 

And a bit of jQuery-driven JavaScript using a validation plugin that fires when the btnNewCategory button is clicked:

 function onNewCategoryClick(event) { $("#frmNewCategory").validate( { rules: { txtNewCategoryName : { required: true }, txtNewCategoryAmount : { required: true, number: true } }, messages: { txtNewCategoryName : { required: "*" }, txtNewCategoryAmount: { required: "*", number: "Invalid Amount." } } }); if (!$("#frmNewCategory").valid()) return; event.preventDefault(); var cmd = cmdFactory.createUndoableNewCategoryCommand($(this)); cmdBus.handleCommand(cmd); } 

The intended method should check frmNewCategory. The problem is that even if the form has invalid values ​​or no values, the .valid () method still returns True.

Any ideas? What am I doing wrong?

Answer 1

Rules take the form of input "names" rather than "identifiers":

  <input type="text" name="txtNewCategoryName" /> <input type="text" name="txtNewCategoryAmount" /> 

Answer 2

Instead:

 <input type="text" id="txtNewCategoryName"> <input type="text" id="txtNewCategoryAmount"> 

Using:

 <input type="text" name="txtNewCategoryName"> <input type="text" name="txtNewCategoryAmount"> 

Answer 3

This template worked for me before:

 $(".required").filter(function () { return $(this).val() == ""; }).addClass("invalidInput"); if (this.formWrp.valid() && this.formWrp.find(".invalidInput").length == 0) return true; 

After that, it seems that the check is activated.