Javascript jQuery验证插件不能与jQuery表单插件一起使用

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

JS:

HTML:

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

我怎样才能解决这个问题

不工作演示：

---

在没有上传插件的情况下进行了演示：

我认为问题可能是因为当您使用fileupload时，它会创建一个表单标签来包装它…因此现在有两个表单，一个表单中有一个。。如果我们把fileuploader放在表单标签之外，那么它就可以正常工作了！如果我把它放在外面，它就会起作用。但我需要将值发送到我的数据库，并需要将其放入一个表单中。您用于上载的插件使用AJAX，它创建了一个表单，这是主要问题。您好，请将jquey upload div移到外部。您可以修改设计，使其看起来像是一种形式。

$(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);
            }
        }
    });

<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>