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 that fires when btnNewCategory 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 method above is supposed to validate frmNewCategory. Trouble is that even if the form has invalid values or no values at all the .valid() method still returns True.

Any ideas? What am I doing wrong?

Answer 1

Instead of:

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

Use:

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

Answer 2

The rules take form input "names" not "ids":

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