Jquery file validation

Question

HTML form:

<form id="add">
            <label>Song:</label>
            <input type="text" name="song" class="form-control"><br>
            <label>Upload Mp3:</label>
            <input type="file" name="file" class="form-control"><br>
            <input type="submit" class="btn btn-default" value="Add">
</form>

jQuery Validation:

$("#add").validate({
    rules: {
        song: {
            required:true,
            },
           file: { 
                required: false,
                extension: "mp3|mpeg|mp4"
            }, 
        },
    });

The extension method isn't working. Whenever I submit, the page reloads.

Did you include the `additional-methods.js` file that includes the `extension` method? — Sparky, Nov 06 '16 at 15:13

adeneo · Accepted Answer · 2016-11-06T15:51:56.897

From the documentation

Some more methods are provided as add-ons, and are currently included in additional-methods.js in the download package. Not all of them are documented here:

accept – Makes a file upload accept only specified mime-types.

creditcard – Makes the element require a credit card number.

extension – Makes the element require a certain file extension.

The additional-methods.js is here -> https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/additional-methods.js

and after adding it, it works just fine

$("#add").validate({
    rules: {
        song: {
            required: true,
        },
        file: {
            required: false,
            extension: "mp3|mpeg|mp4"
        },
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/additional-methods.js"></script>

<form id="add" enctype="multipart/form-data">
    <label>Song:</label>
    <input type="text" name="song" class="form-control">
    <br>
    <label>Upload Mp3:</label>
    <input type="file" name="file" class="form-control">
    <br>
    <input type="submit" class="btn btn-default" value="Add">
</form>

Don't forget `enctype="multipart/form-data"` on the `form` element. — Sparky, Nov 06 '16 at 15:47
@Sparky - yeah, that would be required to send files, so I added it. — adeneo, Nov 06 '16 at 15:52

Soubhagya Kumar Barik · Answer 2 · 2022-05-24T03:45:29.433

jQuery validation plugin doesn't come with the extension method by default, You have to add additional-methods.js.

Alternatively, you also can have an additional customization function to get it done. Please have a look at the below example.

$.validator.addMethod("validateFile", function(value, element) {
    var fileExtension = ['mp3', 'mpeg', 'mp4'];
    return ($.inArray(value.split('.').pop().toLowerCase(), fileExtension) != -1)
}, "Please select a valid file(MP3, MPEG and MP4 are allowed)");


$("#add").validate({
    rules: {
        song: {
            required: true,
            validateFile: true
        },
        file: {
            required: true
        },
    },
})

To hide an error message after uploading the correct file. (Optional)

$('body form').on("keyup paste change focusout", "input,textarea", function() {
    if ($(this).hasClass("error") || $(this).hasClass("valid"))
        $(this).valid();
});

score -2 · Answer 3 · answered Apr 21 '19 at 09:30

jQuery(".fancybox").fancybox({ padding: 0,

openEffect : 'elastic',
openSpeed  : 450,

closeEffect : 'elastic',
closeSpeed  : 350,

closeClick : true,
helpers : {
    title : { 
        type: 'inside' 
    },
    overlay : {
        css : {
            'background' : 'rgba(0,0,0,0.8)'
        }
    }
}

});

score -3 · Answer 4 · answered Nov 06 '16 at 15:12

-3

You need to add an action attribute to the form element. Else it will reload the page.

answered Nov 06 '16 at 15:12

Tinsten

356
2
15

Manish Sadhwani · Answer 5 · 2016-11-06T15:50:26.190

You need to add the "http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/additional-methods.js" file in addition to "http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.js" to make this code work.

Here is the code, that works just fine:

    <script>
        $(document).ready(function(){


        $("#add").validate({
        rules:
        {
            song: {
            required:true
            },
           image: {
                required: false,
                extension: "mp3|mpeg|mp4"
            }, 
        },
});

        });
    </script>
</head>
<body>
<form id="add">
        <label>Song:</label>
        <input type="text" name="song" class="form-control"><br>
        <label>Upload Mp3:</label>
        <input type="file" name="image" class="form-control"><br>
        <input type="submit" class="btn btn-default" value="Add">
</form>
</body>
</html>

This is no different than [adeneo's answer](http://stackoverflow.com/a/40450945/594235) and therefore adds nothing constructive. — Sparky, Nov 06 '16 at 15:50
Oops! sorry, I was late in posting the answer, i was just testing it on my local machine. It may not be constructive but this is the solution: adding both the js files: Validate and additional method js files. rest of the code is just fine. I hope this makes thing more clear, now. — Manish Sadhwani, Nov 06 '16 at 15:55

Jquery file validation

5 Answers5

Linked

Related