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
Was it helpful?

Solution

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top