jquery form validate not catching blank sumbission

Question

I can submit my form whether it is blank or partially filled in, this shouldn't happen since I'm using the jquery validator plug in. I have the plug in script in the right place and the validate method is properly attached to the right form selector. What else could be the problem?

$("form").submit(function(){
     (".selector").validate({
         rules: {
             performance : {
                  required: true,
                  customvalidation: true
             },
             location : {
                  required: true,
                  customvalidation: true
             },
             date : {
                  required: true,
                  customvalidation: false
             },
             time : {
                  required: true,
                  customvalidation: true
             },
             guests : {
                  required: true,
                  customvalidation: true
             },
             price : {
                  required: true,
                  customvalidation: true
             }
         },
         messages: {
             performance : {
                  required: "enter a show name"
             },
         location : {
             required: "enter a location"
          },
          date : {
             required: "pick a date"
                 },
          time : {
             required: "give a time"
                 },
          guests : {
             required: "how many people do you need?"
          },
          price : {
             required: "what is the cover price?"
          }
     },
     submitHandler: function(form) {
          console.log("now validated");
     }
}); //closes validate        

$.validator.addMethod("customvalidation",
           function(value, element) {
                   return (/^[A-Za-z\d=#$%@_ \-]+$/.test(value));
           },
   "Sorry, no special characters allowed"
   );


var date =  $("#date").val();
var showName = $("#performance").val(); 
var venue = $("#location").val();  
var time =  $("#time").val();
var guests = $("#guests").val();
var price = $("#price").val(); 

//this is where I submit to my database//

});//closes submit

score 1 · Accepted Answer · edited May 23 '17 at 12:28

1

Modify your submit function to run event.preventDefault() if validation fails.

Normally you can use return false, but since you've added this event using a jQuery event, you have to use event.preventDefault() instead as discussed here at stackoverflow.

edited May 23 '17 at 12:28

Community

1
1

answered Sep 23 '13 at 01:11

Dave Hilditch

5,299
4
27
35

Thanks. I'll include this, but how do I get the validation to work? – Spilot Sep 23 '13 at 02:47
If you preventDefault then the validation should work from then on as the page won't actually submit and the jquery script will do its job. – Dave Hilditch Sep 23 '13 at 02:59
can you make a jsfiddle and include the link to see it in action? – Dave Hilditch Sep 24 '13 at 19:40
I figured it out. I was using both the sumbit() method and the validate() method when I only needed to use validate() since it detects the submit automatically. I needed to attach validate() to my form only. – Spilot Sep 24 '13 at 20:11

jquery form validate not catching blank sumbission

1 Answers1