Jquery Validator not validating

Question

I'm entering bad input and it's taking it. What am I doing wrong?

   $.validator.addMethod("positiveNumber", function (value) {
       return (Number(value) > 0 || value == "");
   }, "Enter a valid dollar amount");

  $("a#btnSLAlert").click(function(){
     if ($("#frmAlert").valid() === true) {
        $('#mdlAlertSL').foundation('reveal', 'close');
           $.ajax({
                url     : 'captureAlertSL',
                data    : {'price':$("#txtAlertPrice").val(),
                           'shopping_list_id':$("#shopping_list_id").val()},
                type    : 'POST',
                success : function(response){
                $('#saveAlertSuccess').foundation('reveal', 'open');
                window.setTimeout (function(){$('#saveAlertSuccess').foundation('reveal', 'close');},2000);
                },
                error   : function(response){alert(response);}
           });
     }
  });

  $('#frmAlert').validate({
      rules: {
          txtAlertPrice: {required:true, positiveNumber: true}
      }
  });

Answer 1

EUREKA! I didn't have the name property set of the input text box.

As the documentation states:

The name attribute is '''required''' for input elements, the validation plugin doesn't work without it. Usually name and id attributes should have the same value.

Here's the working code in all of its glory. Please note that I moved the actual submit work to the submitHandler, which is where it's really supposed to go.

   $.validator.addMethod("positiveNumber", function (value) {
       return (Number(value) > 0);
   }, "Enter a valid dollar amount");

  $("a#btnSLAlert").click(function(){
     if ($("#frmAlert").valid() === true) {
     $('#frmAlert').submit();
     }
  });

  $('#frmAlert').validate({
      rules: {
          txtAlertPrice: {required:true, positiveNumber: true}
      },
      messages: {
         txtAlertPrice: {
                   required: "Please enter a price",
                   positiveNumber: "Enter a valid dollar amount"
                   }
      },
      submitHandler:function(){
        $('#mdlAlertSL').foundation('reveal', 'close');
           $.ajax({
                url     : 'captureAlertSL',
                data    : {'price':$("#txtAlertPrice").val(),
                           'shopping_list_id':$("#shopping_list_id").val()},
                type    : 'POST',
                success : function(response){
                $('#saveAlertSuccess').foundation('reveal', 'open');
                window.setTimeout (function(){$('#saveAlertSuccess').foundation('reveal', 'close');},2000);
                },
                error   : function(response){alert(response);}
           });
      }
  });

Answer 2

Try this:

$.validator.addMethod("positiveNumber", function (value) {
       return (Number(value) > 0 || value == "");
   }, "Enter a valid dollar amount");

$("a#btnSLAlert").click(function(){
     $('#frmAlert').submit();
});

$('#frmAlert').submit(function(){
    if($('#frmAlert').valid()){
        $('#mdlAlertSL').foundation('reveal', 'close');
           $.ajax({
                url     : 'captureAlertSL',
                data    : {'price':$("#txtAlertPrice").val(),
                           'shopping_list_id':$("#shopping_list_id").val()},
                type    : 'POST',
                success : function(response){
                $('#saveAlertSuccess').foundation('reveal', 'open');
                window.setTimeout (function(){$('#saveAlertSuccess').foundation('reveal', 'close');},2000);
                },
                error   : function(response){alert(response);}
           });
    }
});

$('#frmAlert').validate({
    rules: {
        txtAlertPrice: {required:true, positiveNumber: true}
    }
});