Question

我使用jquery validation plugin来验证我的表单。在我的表单中，我使用jquery form plugin的jquery上传文件。

JS：

$(document).ready(function()
{

$("#fileuploader").uploadFile({
    url: "upload.php",
    dragDrop:true,
    multiple:false,
    fileName: "myfile",
    returnType:"json",
    showDelete:true,
    showFileCounter:false,
    onSuccess:function(fileArray, data, xhr, pd)
    {   
        var url = "download.php?filename="+data[0];
        //pd.filename.html(data[0]);
        pd.filename.html("<a href='"+url+"'>"+data[0]+"</a>");
    },
    deleteCallback: function(data,pd)
    {
    for(var i=0;i<data.length;i++)
    {
        $.post("delete.php",{op:"delete",name:data[i]},
        function(resp, textStatus, jqXHR)
        {
            //Show Message  
            alert("File Deleted");      
        });
     }      
    pd.statusbar.hide(); //You choice to hide/not.

}

});

});   
$('form').validate({
    ignore:'.uploadFile',
        rules: {
            firstname: {
                minlength: 3,
                maxlength: 15,
                required: true
            },
            lastname: {
                minlength: 3,
                maxlength: 15,
                required: true
            }
        },
        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>
    <div id="fileuploader">Upload</div>
    <div class="form-group">
        <label class="control-label" for="firstname">Nome:</label>
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input class="form-control" placeholder="Insira o seu nome próprio" name="firstname" type="text" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label" for="lastname">Apelido:</label>
        <div class="input-group">
            <span class="input-group-addon">€</span>
            <input class="form-control" placeholder="Insira o seu apelido" name="lastname" type="text" />
        </div>
    </div>

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

现在，jquery验证与jquery表单插件冲突，而不是验证我的表单。我尝试了ignore:'.uploadFile'函数，但jquery验证不起作用。

我该如何解决这个问题？！

不工作DEMO：http://jsfiddle.net/hTPY7/1400/

没有上传插件的演示演示：http://jsfiddle.net/hTPY7/1404/

jQuery验证插件不适用于Jquery表单插件

0 个答案: