Jquery file validation | 易学教程

问题

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.

回答1:

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>

回答2:

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)'
        }
    }
}

});

回答3:

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

回答4:

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>

来源：https://stackoverflow.com/questions/40450766/jquery-file-validation

标签

jquery

jquery-validate