[html] jQuery를 통해 제출하지 않고 HTML5 양식 유효성 검사를 수행하는 방법

Html / 글쓴이

내 앱 에이 양식이 있으며 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;
});