On step changing check file size and file type Jquery-Steps

Question

I'm using jquery-steps plugin . now im trying to check if file extension is .jpg or not. everything works fine except filetype checking. it accepts everything but it shouldn't

$("#passportForm").steps({
         headerTag: "h1",
         bodyTag: "fieldset",
         enableFinishButton: false,
         transitionEffect: "fade",
         stepsOrientation: "vertical",
         onStepChanging: function (event, currentIndex, newIndex) {
             // Always allow going backward even if the current step contains invalid fields!
             if (currentIndex > newIndex) {
                 return true;
             }

             var form = $(this);

             // Clean up if user went backward before
             if (currentIndex < newIndex) {
                 // To remove error styles
                 $(".body:eq(" + newIndex + ") label.error", form).remove();
                 $(".body:eq(" + newIndex + ") .error", form).removeClass("error");
             }

             // Disable validation on fields that are disabled or hidden.
             form.validate({
                 rules: {field: {required: true,extension: "jpeg|jpg"}}***,
                 errorPlacement: function (error, element) { }
             }).settings.ignore = ":disabled,:hidden";

             // Start validation; Prevent going forward if false
             return form.valid();
         },
         onStepChanged: function (event, currentIndex, priorIndex) {

         },
         onFinishing: function (event, currentIndex) {
             var form = $(this);

             // Disable validation on fields that are disabled.
             // At this point it's recommended to do an overall check (mean ignoring only disabled fields)
             form.validate({ errorPlacement: function (error, element) { } }).settings.ignore = ":disabled";

             // Start validation; Prevent form submission if false
             return form.valid();
         },
         onFinished: function (event, currentIndex) {
             var form = $(this);

             form.submit();
         }
     });

also i need to check file size. it must be less than 3mb. and the third problem is that when we click fast NEXT button it pass to the next steps without validating

Answer 1

Your approach (using the jQuery Validate plugin) is completely flawed....

$("#passportForm").steps({
    ....
    onStepChanging: function (event, currentIndex, newIndex) {
         ....

         var form = $(this);
         ....

         // Disable validation on fields that are disabled or hidden.
         form.validate({
             rules: {field: {required: true,extension: "jpeg|jpg"}}***,
             errorPlacement: function (error, element) { }
         }).settings.ignore = ":disabled,:hidden";

         // Start validation; Prevent going forward if false
         return form.valid();
     },
     ....
     onFinishing: function (event, currentIndex) {
         var form = $(this);

         // Disable validation on fields that are disabled.
         // At this point it's recommended to do an overall check (mean ignoring only disabled fields)
         form.validate({ errorPlacement: function (error, element) { } }).settings.ignore = ":disabled";

         // Start validation; Prevent form submission if false
         return form.valid();
     },
     ....
 });

You cannot simply call .validate() with a new set of options whenever you wish.

Based on your code comments, it also seems like you might think that you call validate() to trigger validation on demand... that's not how it works.

The .validate() method is only used to initialize the plugin on your form one time on page load. Once called (and initialized), any subsequent calls to the .validate() method are ignored.

If you have a form that's already been initialized with .validate() , you can call the .valid() method to trigger a validation test at any time.

If you need to "start/stop" or toggle validation, you cannot. However, you can simulate something like that by using the .rules() method. You could call .rules('remove') on all input elements to remove all validation rules, effectively removing any validation checks. Then you could call .rules('add', { /* your rules */ }) on any input elements to put rules back in place, effectively allowing validation again.

Despite being allowed to add/remove rules, you absolutely cannot add/remove/change any settings or options once initialized by your call to .validate() .