javascript - jQuery validator not working for file input type - Stack Overflow

admin管理员组

文章数量:1322838

I am trying to implemenet validation for file input type using jQuery validator plugin. The file input type should accept only images with .jpeg, .jpg & .png extension & file size should not be greater than 1MB. Validation for other input fields work without any issues. Required validation works for file input type.

What could be the issue?

Javascript

jQuery.validator.addMethod('filesize', function(value, element, param) {
   return this.optional(element) || (element.files[0].size <= param) 
});    

$('#form').validate({
        rules: {
            firstname: {
                minlength: 6,
                required: true
            },
            lastname: {
                minlength: 6,
                required: true
            },
            file: {
                required: true, 
                accept: "png|jpeg|jpg",
                filesize: 1048576 
            }
        },
        messages: 
           { 
            file: "File must be JPEG or PNG, less than 1MB" 
           },
        highlight: function(element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function(error, element) {
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        }
    });

HTML

<form id="form">
    <div class="form-group">
        <label class="control-label" for="firstname">First:</label>
        <div class="input-group">
            <input class="form-control"  name="firstname" type="text" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label" for="lastname">Last:</label>
        <div class="input-group">
            <input class="form-control" name="lastname" type="text" />
        </div>
    </div>

        <div class="form-group">
        <label class="control-label" for="file">Image:</label>
        <div class="input-group">
            <input  id="file" name="file" type="file" />
        </div>
    </div>


        <button type="submit" class="btn btn-primary">Submit</button>
</form>

Fiddle that doesn't give desired result

I am trying to implemenet validation for file input type using jQuery validator plugin. The file input type should accept only images with .jpeg, .jpg & .png extension & file size should not be greater than 1MB. Validation for other input fields work without any issues. Required validation works for file input type.

What could be the issue?

Javascript

jQuery.validator.addMethod('filesize', function(value, element, param) {
   return this.optional(element) || (element.files[0].size <= param) 
});    

$('#form').validate({
        rules: {
            firstname: {
                minlength: 6,
                required: true
            },
            lastname: {
                minlength: 6,
                required: true
            },
            file: {
                required: true, 
                accept: "png|jpeg|jpg",
                filesize: 1048576 
            }
        },
        messages: 
           { 
            file: "File must be JPEG or PNG, less than 1MB" 
           },
        highlight: function(element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function(error, element) {
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        }
    });

HTML

<form id="form">
    <div class="form-group">
        <label class="control-label" for="firstname">First:</label>
        <div class="input-group">
            <input class="form-control"  name="firstname" type="text" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label" for="lastname">Last:</label>
        <div class="input-group">
            <input class="form-control" name="lastname" type="text" />
        </div>
    </div>

        <div class="form-group">
        <label class="control-label" for="file">Image:</label>
        <div class="input-group">
            <input  id="file" name="file" type="file" />
        </div>
    </div>


        <button type="submit" class="btn btn-primary">Submit</button>
</form>

Fiddle that doesn't give desired result

• javascript
• jquery
• jquery-validate

Share Improve this question Follow edited Jun 4, 2015 at 17:55 Sparky 98.8k2626 gold badges202202 silver badges290290 bronze badges asked Jun 4, 2015 at 9:00 version 2version 2 1,05933 gold badges1616 silver badges3636 bronze badges 2

• I get a call error in the console – mplungjan Commented Jun 4, 2015 at 9:09
• 2 "...should accept only images with .jpeg, .jpg & .png extension" ~ The accept rule is only for MIME types. The extension rule is for file extensions. You also need to include the additional-methods.js file for these rules. – Sparky Commented Jun 4, 2015 at 17:44

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

...should accept only images with .jpeg, .jpg & .png extension

1. The accept rule is only for MIME types. The extension rule is for file extensions. Looks like you should be using the extension rule instead of accept. You also need to include the additional-methods.js file in order to use these rules.

2. In order to have access to the file's size property, you need to set the enctype="multipart/form-data" attribute on the <form> tag.

Working DEMO: http://jsfiddle/mv8w3m0c/1/

本文标签： javascriptjQuery validator not working for file input typeStack Overflow