在步骤更改检查文件大小和文件类型Jquery-Steps [英] On step changing check file size and file type Jquery-Steps

问题描述

我正在使用 jquery-steps插件。现在我试图检查文件扩展名是否为.jpg。一切正常，除了文件类型检查。它接受了所有内容，但它不应该

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();
         }
     });

我还需要检查文件大小。它必须小于3mb。第三个问题是，当我们点击快速下一步按钮时，它会转到下一步而不验证

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

推荐答案

你的方法（使用jQuery Validate插件）完全有缺陷....

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();
     },
     ....
 });

您不能简单地拨打 .validate（）随时随地使用一组新选项。

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

根据您的代码注释，您似乎可能认为您调用 validate（） 按需触发验证......这不是它的工作原理。

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.

.validate（）方法仅用于在页面加载时一次初始化表单上的插件。一旦调用（并初始化），将忽略对 .validate（）方法的任何后续调用。

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.

如果你有一个已经用 .validate（）初始化的表单，你可以调用 .valid（）方法来触发随时进行验证测试。

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.

如果您需要开始/停止或切换验证，则不能。但是，您可以使用 .rules（）方法模拟类似的东西。您可以在所有输入元素上调用 .rules（'remove'）以删除所有元素验证规则，有效删除任何验证检查。然后你可以在任何输入<上调用 .rules（'add'，{/ *你的规则* /}） / code>将规则放回原位的元素，有效地允许再次验证。

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.

尽管允许添加/删除规则，但绝对不能添加/删除/通过调用 .validate（）初次化后更改任何设置或选项。

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

这篇关于在步骤更改检查文件大小和文件类型Jquery-Steps的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！