내 앱 에이 양식이 있으며 AJAX를 통해 제출하지만 클라이언트 측 유효성 검사에 HTML5를 사용하고 싶습니다. 따라서 jQuery를 통해 양식 유효성 검사를 강제로 수행 할 수 있기를 원합니다.
양식을 제출하지 않고 유효성 검사를 시작하고 싶습니다. 가능합니까?
답변
특정 필드가 유효한지 확인하려면 다음을 사용하십시오.
$('#myField')[0].checkValidity(); // returns true/false양식이 유효한지 확인하려면 다음을 사용하십시오.
$('#myForm')[0].checkValidity(); // returns true/false불행히도 일부 브라우저에있는 기본 오류 메시지 (예 : Chrome)를 표시하려면 다음과 같이 양식을 제출하면됩니다.
var $myForm = $('#myForm');
if(! $myForm[0].checkValidity()) {
// If the form is invalid, submit it. The form won't actually submit;
// this will just cause the browser to display the native HTML5 error messages.
$myForm.find(':submit').click();
}도움이 되었기를 바랍니다. 일부 브라우저에서는 HTML5 유효성 검사가 지원되지는 않습니다.
답변
이 솔루션이 저에게 효과적이라는 것을 알았습니다. 다음과 같이 자바 스크립트 함수를 호출하십시오.
action="javascript:myFunction();"
그런 다음 html5 유효성 검사가 있습니다 … 정말 간단합니다 🙂
답변
if $("form")[0].checkValidity()
$.ajax(
url: "url"
type: "post"
data: {
}
dataType: "json"
success: (data) ->
)
else
#important
$("form")[0].reportValidity()부터 : html5 양식 유효성 검사
답변
아래 코드는 저에게 효과적입니다.
$("#btn").click(function () {
if ($("#frm")[0].checkValidity())
alert('sucess');
else
//Validate Form
$("#frm")[0].reportValidity()
});답변
좀 더 깔끔한 일반적인 방법은 다음과 같습니다.
다음과 같이 양식을 작성하십시오 (아무 것도하지 않는 더미 양식 일 수 있음).
<form class="validateDontSubmit">
...제출하고 싶지 않은 모든 양식을 바인드하십시오.
$(document).on('submit','.validateDontSubmit',function (e) {
//prevent the form from doing a submit
e.preventDefault();
return false;
})이제 클릭하면 양식의 유효성을 검사하려는 <a>(안에 있음 <form>)이 있다고 가정 해 보겠습니다.
$('#myLink').click(function(e){
//Leverage the HTML5 validation w/ ajax. Have to submit to get em. Wont actually submit cuz form
//has .validateDontSubmit class
var $theForm = $(this).closest('form');
//Some browsers don't implement checkValidity
if (( typeof($theForm[0].checkValidity) == "function" ) && !$theForm[0].checkValidity()) {
return;
}
//if you've gotten here - play on playa'
});몇 가지 참고 사항 :
- 유효성 검사를 위해 실제로 양식을 제출할 필요는 없습니다. 호출
checkValidity()은 충분합니다 (적어도 크롬에서는). 다른 브라우저에서이 이론을 테스트하면서 의견을 추가 할 수 있다면이 답변을 업데이트하겠습니다. - 유효성 검사를 트리거하는 것은 내에 있어야 할 필요는 없습니다
<form>. 이것은 범용 솔루션을위한 깨끗하고 유연한 방법입니다.
답변
파티에 늦을 수도 있지만 어떻게 든 비슷한 문제를 해결하는 동안이 질문을 찾았습니다. 이 페이지의 코드가 나를 위해 작동하지 않았으므로 지정된대로 작동하는 솔루션을 생각해 냈습니다.
문제는 <form>DOM에 단일 <button>요소가 포함 되면 한 번 실행되면 <button>자동으로 양식을 요약 하는 것입니다. AJAX를 사용하는 경우 기본 동작을 방지해야합니다. 그러나 문제가 있습니다. 그렇게하면 기본 HTML5 유효성 검사도 방지 할 수 있습니다. 따라서 양식이 유효한 경우에만 해당 버튼의 기본값을 방지하는 것이 좋습니다. 그렇지 않으면 HTML5 유효성 검사로 인해 제출이 보호됩니다. jQuery checkValidity()는 다음과 같이 도움이 될 것입니다.
jQuery :
$(document).ready(function() {
$('#buttonID').on('click', function(event) {
var isvalidate = $("#formID")[0].checkValidity();
if (isvalidate) {
event.preventDefault();
// HERE YOU CAN PUT YOUR AJAX CALL
}
});
});위에서 설명한 코드를 사용하면 양식을 제출하지 않고도 기본 HTML5 유효성 검사 (유형 및 패턴 일치)를 사용할 수 있습니다.
답변
javascript / jquery를 사용하여 “HTML5 유효성 검사”와 HTML 양식의 유효성 검사에 대해 두 가지로 이야기합니다.
HTML5에는 양식의 유효성을 검사하기위한 기본 제공 옵션이 있습니다. 필드에서 “필수”속성을 사용하는 것과 같이 (브라우저 구현에 따라) javascript / jquery를 사용하지 않고 양식 제출에 실패 할 수 있습니다.
javascrip / jquery를 사용하면 다음과 같이 할 수 있습니다
$('your_form_id').bind('submit', function() {
// validate your form here
return (valid) ? true : false;
});