要件の削除jQuery最小画像サイズ

Question

私はユーザーが画像を入力して送信するフォームを持っています。 jQueryバリデータプラグインを使用して、イメージが実際にイメージ、イメージのファイルサイズ、およびイメージのサイズであるかどうかを検証しています。ユーザーはイメージをアップロードする必要はありませんが、イメージをアップロードする場合は、イメージにこれらのルールが適用されます。私もクロッピングプラグインを入れました。このプラグイン（クロボックス）は、ユーザーがクロップしたいものに基づいて画像を切り抜きます。現在、フォームは検証ルールで正しく機能します。ただし、ユーザーは画像を送信する必要はありませんが、バリデータは、ユーザーが何もアップロードしていない場合でも少なくとも600ピクセル×360ピクセルの画像を送信する必要があることをユーザーに通知します。ユーザーがイメージをアップロードしたくないときにバリデータがエラーを表示しないようにするにはどうすればよいですか？ここに私のjsfiddle

HTML

<form class="properties_form" action="" method="post"> 
    <div class="imageGroup"> 
    <input class="image_upload" name="image_upload" type="file"> 
    <div class="imgBox"> 

    </div> 
    </div> 
    <input class="finish_btn" type="submit"> 
</form> 

jQueryの

$(".properties_form").validate({ 
    errorElement: 'div', 
    rules: { 

    image_upload: { 
     extension: "jpg|png|jpeg|JPG|PNG|JPEG", 
     filesize: 100000, 
     minImageSize: { 
     width: 600, 
     height: 360 
     } 
    }, 
    }, 


    messages: { 
    image_upload: { 
     extension: "We only accept .jpg and .png images.", 
     minImageSize: "Your image must be at least 600px by 360px.", 
     filesize: "Your image size should not exceed 100KB" 
    }, 
    }, 

}); 


var $form = $('.properties_form'), 
    $finish_btn = $form.find('finish_btn'); 
$form.find('.image_upload').change(function() { 
    var $image_upload = $(this), 
    $imgBox = $image_upload.closest('.imageGroup').find('.imgBox'); 

    $image_upload.removeData('imageSize'); 
    $imgBox.hide().empty(); 

    var file = this.files[0]; 

    if (file.type.match(/image\/.*/)) { 
    $finish_btn.attr('disabled', true); 

    var reader = new FileReader(); 

    reader.onload = function() { 
     var $img = $('<img />').attr({ 
     src: reader.result 
     }); 

     $img.on('load', function() { 
     $imgBox.append($img).show(); 

     $image_upload.data('imageSize', { 
      width: $img.width(), 
      height: $img.height() 
     }); 

     $img.css({ 
      display: "none" 
     }); 

     $finish_btn.attr('disabled', false); 

     validator.element($image_upload); 
     }); 
    } 

    reader.readAsDataURL(file); 
    } else { 
    validator.element($image_upload); 
    } 
}); 


$(function() { 

    $(".image_upload").on('change', function() { 
    var file = this.files[0]; 
    var reader = new FileReader(); 
    reader.onload = function() { 
     var $img = $('<img />').attr({ 
     src: reader.result 
     }); 

     $img.on('load', function() { 
     $img.cropbox({ 
      width: 650, 
      height: 360 
     }).on('cropbox', function(event, results, img) { 

     }); 
     }); 

     $('.imgBox').append($img); 

    }; 
    reader.readAsDataURL(file); 
    }); 
}); 

$.validator.addMethod('minImageSize', function(value, element, minSize) { 
    var imageSize = $(element).data('imageSize'); 
    return (imageSize) && (imageSize.width >= minSize.width) && (imageSize.height >= minSize.height); 
}, function(minSize, element) { 
    return ($(element).data('imageSize')) ? ("Your image's size must be at least " + minSize.width + "px by " + minSize.height + "px") : "Selected file is not an image."; 
}); 

$.validator.addMethod('filesize', function(value, element, param) { 
    return this.optional(element) || (element.files[0].size <= param) 
}, 'File size must be less than {0}'); 

Answer 1

だバリデータは、ユーザーがX 360px少なくとも600PXで画像を提出する必要があり、ユーザに指示しますユーザーが何もアップロードしていない場合でも

これは、ルールのオプションをにするのを忘れたからです。

return this.optional(element) || ..... 

この部分がないと、ルールは常に空のフィールドで評価されます。要素が「オプション」かどうかを確認するには、this.optional(element)を使用する必要があります...

$.validator.addMethod('minImageSize', function(value, element, minSize) { 
    var imageSize = $(element).data('imageSize'); 
    return this.optional(element) || ((imageSize) && (imageSize.width >= minSize.width) && (imageSize.height >= minSize.height)); 
}, function(minSize, element) { 
    return ($(element).data('imageSize')) ? ("Your image's size must be at least " + minSize.width + "px by " + minSize.height + "px") : "Selected file is not an image."; 
});