1
jQueryのフォームで作業していて、jQueryの検証を使用しています。用紙にラテックスファイルのみを受け入れるようにしたいのですが、文書化して受け入れメソッドを使用しようとしました。https://jqueryvalidation.org/accept-method/ 。jQueryの検証、ラテックスファイルのみを受け入れる
https://www.freeformatter.com/mime-types-list.htmlここに私の理解から、だから私は私のフォームは、次の$('#adminLatexUpload').validate({
rules: {
file: {
required: true,
accept: "application/x-latex"
},
version: {
required: true,
pattern: /^[a-zA-Z0-9_.\/]*$/
}
},
messages: {
file: {
accept: "Unsupported file type, you must upload a .latex file"
},
version: {
pattern: "Invalid naming convention, no whitespaces or special characters"
}
},
errorElement: "span", // error tag name
errorPlacement: function(error, element) { // rules for placement of error tag
element.parent().parent().addClass('has-error');
error.addClass('help-block');
error.appendTo(element.parent());
},
success: function(error, element) { // rules for placement of success tag
error.removeClass('help-block');
error.parents('.form-group').removeClass('has-error');
error.remove();
},
submitHandler: function(form, e) {
document.write('Good');
},
invalidHandler: function(e, validator) {
var errorCount = validator.numberOfInvalids();
if (errorCount) {
var errMessage = errorCount === 1 ? "You have 1 error." : "You have " + errorCount + " errors."
window.confirm(errMessage);
}
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>
<div class="col-md-4 latex-container">
<h4>Upload new Latex File</h4>
<form class="form-vertical" id="adminLatexUpload">
<div class="form-group">
<label class="control-label">
Attach Latex File:
<input class="form-control" type="file" name="file" id="adminLatexUpload_File" accept=".tex" required />
</label>
</div>
<div class="form-group">
<label class="control-label">
Version Name:
<input class="form-control" type="text" name="version" id="adminLatexUpload_Version" required />
</label>
</div>
<button class="btn btn-success btn-sm" id="adminLatexUpload_Submit" type="submit"><span class="glyphicon glyphicon-share"></span> Upload</button>
</form>
</div>"application/x-latex"
です
現在、ページをクリックするとページが更新されます彼は両方のフィールドが記入されている場合、ボタンを送信します。テキストフィールドは、期待どおりに検証されます。しかし、入力フィールドはかなりの未定義の動作を示します。現在、私のテストは、次のことを明らかにした
： 
を - 非ラテックスファイル（.JPG及び.GIF）を追加するには、いずれかの検証 応答以外でファイルを送信
をトリガしません。 -texファイルは
は私に別のエラーメッセージとを与える必要があり、間違ったファイルをアップロード
、ファイルがエラーを必要とトリップせずにフォームを送信しようとすると更新されます それは、必要なエラーがこれらの
2を持続しませんが受け入れるメソッドが失敗しているという事実を指しているが、何のシナリオは、ページの更新を強制するべきではありません。
私の検証メソッドに問題がありますか？そして、このページをリフレッシュさせる原因は何ですか？
編集 debug:trueを追加する提案を取った後、私は不正なファイルの提出
に同様の入力に
accept属性を変更する入力フィールドに未定義の振る舞いを記述することがあります。 – Jasonページが更新されると、プラグインの検証の設定が失敗したことを意味します。オプションに 'debug：true'を追加して、フォームを送信するときにエラーをコンソールで確認してください。また、決して、 'document.write'を使用しないでください –
@Jason私のテストを定義するために私の質問を編集し、期待された動作と私が見ているもの – Callat