文件上傳驗證得到觸發上上傳按鈕點擊，而非OK按鈕

-1

我驗證使用jQuery驗證這樣的文件上傳：文件上傳驗證得到觸發上上傳按鈕點擊，而非OK按鈕

HTML

<form class="getintouch_form" name="Form_Career" action="" id="frm"> 
    <input type="file" id="fileInput" name="UploadResume" placeholder="Upload Resume">  
    <button class="submitbtn bluebutton" id="BtnSend" type="button">Send</button> 
</form>

JQuery的

$.validator.addMethod(
    "UploadResume", 
    function(value, element) { 
    return /\.(doc|docx|pdf)$/i.test(value); 
    }, 
    "Only docx,doc,pdf file formats allow" 
); 
$("#frm").validate({ 
    onfocusout: function(element) { 
    $(element).valid(); 
    }, 
    rules: { 
    UploadResume: { 
     required: true, 
     UploadResume: true 
    } 
    }, 

    messages: { 
    UploadResume: { 
     required: "Resume is mandatory field." 
    } 
    }, 
});

問題
驗證在我點擊上傳按鈕後立即被觸發，而不是在選擇文件後點擊確定按鈕後被觸發。我只想在選擇文件後觸發驗證。我也附上了Codepen Link。

CodePen：https://codepen.io/Ruhard/pen/RgPeQP

來源

2017-06-07 Ubiquitous Developers

@Sparky - 我的驗證工作正常。問題是驗證獲取觸發器上的選擇按鈕不在文件對話框的確定按鈕上。檢查我已附加的圖像 –

顯然，當選擇文件時，此插件無法觸發驗證。請考慮在他的GitHub頁面上向開發人員提交報告。與此同時，羅裏的答案是一個完全可以接受的解決方法，利用插件。 – Sparky

要創建您所需要的行爲，你可以調用形式valid()的change事件的輸入，選擇文件後觸發下。試試這個：

$('#fileInput').change(function() { 
    $('#frm').valid(); 
});

來源

2017-06-07 07:37:26

我不想提交表單上的文件上傳更改，因爲我也有其他領域的形式。我只是想在文件上傳對話框中觸發驗證 –

在這種情況下，在窗體上調用'valid（）'。我更新了答案 –

無法在JQuery驗證中處理任何操作？我是否需要編寫額外的代碼？ –

請嘗試簡單的jquery函數進行驗證和文件類型檢查。在這裏，我提到了新的jQuery代碼。

function FileUploadValidation(){ 
    var allowedFiles = [".doc", ".docx", ".pdf"]; 
     var fileUpload = $("#fileInput"); 
     var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(" + allowedFiles.join('|') + ")$"); 
     if (!regex.test(fileUpload.val().toLowerCase())) { 
      alert("Please upload files having extensions: <b>" + allowedFiles.join(', ') + "</b> only."); 
      return false; 
     }   
     return true; 
} 
$("#BtnSend").click(function() { 
     FileUploadValidation(); 
}); 
$('#fileInput').bind('change', function() { 
     if(!FileUploadValidation()) 
      $('#fileInput').val(); 
});

來源

2017-06-07 10:00:47

文件上傳驗證得到觸發上上傳按鈕點擊，而非OK按鈕

回答

相關問題