1
jQuery에서 양식으로 작업하고 jQuery 유효성 검사를 사용하여 양식에 라텍스 파일 만 허용하고 설명서를 검토하여 수락 방법을 사용하려고 시도했습니다 https://jqueryvalidation.org/accept-method/ . 내 여기 https://www.freeformatter.com/mime-types-list.htmljQuery 유효성 검사, 라텍스 파일 만 허용
이해 수락에서
는 MIME 형식을 필요로하고 라텍스의 MIME 타입은 그래서 난 내 양식은 다음
$('#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"
입니다
현재 t를 클릭하면 페이지가 새로 고침됩니다. 그는 두 필드를 모두 채우면 버튼을 전송합니다. 텍스트 필드는 예상대로 유효성을 검사합니다. 그러나 입력 필드는 상당히 정의되지 않은 동작을 보여줍니다.
현재 내 테스트는 다음 밝혔다 : 
- 비 라텍스 파일을 추가 (.JPG 및 .gif 참고) 비와 파일을 제출 유효성 검사 응답
를 트리거하지 않습니다 -tex 파일은
나에게 다른 오류 메시지와를 제공해야합니다 잘못된 파일을 업로드
, 파일이 오류를 필요로 여행하지 않고 양식을 제출하려고 갱신 그렇지 필요한 오류가 이들의
2이 방법은 실패에 동의하지만 시나리오는 페이지 새로 고침을 강제해서는 안된다는 사실을 가리키고 지속 않습니다.
유효성 검사 메소드가 잘못되었습니다. 이 페이지가 새로 고침되는 원인은 무엇입니까?
편집 내가 잘못된 파일의 기본 문제는 accept 검증이 핵심에 추가 방법 파일에이 아닌 것입니다
에뿐만 아니라 입력에
accept속성을 변경 입력 필드에 정의되지 않은 동작을 설명 할 수 있습니다. – Jason페이지가 새로 고침되면 플러그인 유효성 검사 설정에 실패했음을 의미합니다.옵션에'debug : true'를 추가 한 다음 폼을 제출할 때 콘솔에 오류가 있는지 확인하십시오. 또한 결코 사용,'절대 document.write' –
@ 제이슨 내 테스트, 그들의 기대 동작 및 내가 뭘보고 정의 할 내 질문을 편집 – Callat