Question

我blueimp jquery file upload在我的表单中使用了其他几个表单字段。它在理想情况下工作正常。但是当我尝试将jquery validation plugin合并到其他2个字段时，我陷入困境。

HTML

<form id="fileupload" method="POST" enctype="multipart/form-data">
<div class="fullwidth">
    <div id="saveCancelDashbContainer" class="ui-grid-a cancelSaveBtn">
        <div class="ui-block-a head-div btn-div">
            <button class="cancelBtn" type="reset" data-role="button" data-inline="true">Cancel</button>
        </div>
        <div id="patientDashbContainer" class="ui-block-b head-div">
            <!--#include virtual="patientDashboardButton.shtml" -->
        </div>
        <div class="ui-block-c head-div">
             <h1>Add Files</h1>

        </div>
    </div>
    <div class="scrollManager fileupload-buttonbar">
        <div class="ui-grid-a">
            <div class="ui-block-a  mid-div" id="categoryContainer">
                <label for="formCategory">Category</label>
                //Required
                <select id="formCategory" name="formCategory">
                    <option value="pleaseSelect">Select Category</option>
                </select>
            </div>
            <div class="ui-block-c" id="fileNameContainer">
                <label for="form_duration">File title</label>
                //Required
                <input name="form_file_name" id="form_file_name" value="" type="text" />
            </div>
        </div>
        <div class="ui-block-b full-div" id="notesContainer">
            <label for="chief_complaint">Notes</label>
            <textarea name="form_file_notes" id="form_file_notes"></textarea>
        </div>
        <div class="fileupload-buttons">
            <label>Select files</label>
            <input type="file" name="files[]" multiple>
            <input type="submit" class="start" value="Save" data-inline="true" /> <span class="fileupload-loading"></span>
        </div>
        <div class="fileupload-progress fade" style="display:none">
            <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="progress-extended">&nbsp;</div>
        </div>
        <table role="presentation">
            <tbody class="files"></tbody>
        </table>
    </div>
</div>

JAVASCRIPT - 文件上传

// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({
    // Uncomment the following to send cross-domain cookies:
    //xhrFields: {withCredentials: true},
    url: '../api/filedocuments/'+localStorage.getItem("PMR_patient_id"),
    submit: function (e, data) {
         if(!$("form").valid())
         {
            return false;
         }else{
            return true;
         }

     }
});

JAVASCRIPT - 验证

$.validator.addMethod(
"notEqual_select", 
function(value, element, param) {
    return $(element).val() !== "pleaseSelect";
});

$("#fileupload").validate({

//Enabling validation for hidden types
ignore: [],

//Element in which error is shown
errorElement: "p",

//For error element
errorLabelContainer: ".error",

//For error placement
errorPlacement: function(error, element) {
    if($(element).attr("type") !== null && $(element).attr("type") === "hidden"){
        error.insertAfter($(element));
    }
    else{
        error.insertAfter($(element).parent());
    }
},

//Rules of validation
rules: {
    formCategory: {
        notEqual_select: true
    },
    form_file_name: {
        required: true
    }
},

//Validation Messages
messages: {
    formCategory: {
        notEqual_select: "Select category"
    },
    form_file_name: {
        required: "Enter file title"
    }
}});

此代码在第一次提交表单时验证必填字段，但下次尝试上传文件时，即使填写了必填字段，也没有显示任何处理，文件根本没有上传。如果您需要更多相关信息，请与我们联系。

感谢您提前提供任何帮助。

使用jquery验证上传Jquery文件

0 个答案: