jQuery에서 클릭 시 버튼을 사용하여 HTML5 양식 유효성 검사 강제 실행

원래 게시된 @https://codeanddeploy.com 방문하여 샘플 코드 다운로드: https://codeanddeploy.com/blog/jquery/force-html5-form-validation-using-button-on-click-in-jquery

이 게시물에서는 jQuery에서 양식을 제출하지 않고 HTML5 양식 유효성 검사를 강제하는 방법에 대한 솔루션을 공유합니다. 양식을 제출할 때 클릭 시 버튼을 사용해야 하고 기본 양식 유효성 검사를 사용하려는 경우.

양식 필드가 유효한지 확인합니다.

$('#form')[0].checkValidity(); // returns true/false


양식 오류를 보고합니다.

$("#form")[0].reportValidity()


예 1:

$('#button').on('click', function() {
   if($("#form")[0].checkValidity()) {
      alert('success');
   } else {
      $("#form")[0].reportValidity()
   }
});


예 2:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            $("#button").on("click", function() {

                if($("#form")[0].checkValidity()) {
                    var title = $("#form [name='title']").val();

                    // ajax here
                } else {
                    $("#form")[0].reportValidity();
                }


            });
        })
    </script>
</head>
<body>

    <form id="form" method="post">
        <input type="text" name="title" placeholder="title" required>
        <button type="button" id="button">Submit</button>
    </form>

</body>
</html>


내 예제가 버튼 클릭 시 HTML 5 양식 유효성 검사를 강제하는 방법에 도움이 되기를 바랍니다. 이 튜토리얼이 도움이 되었으면 합니다. 이 코드를 다운로드하려면 여기https://codeanddeploy.com/blog/jquery/force-html5-form-validation-using-button-on-click-in-jquery를 방문하십시오.

행복한 코딩 :)

좋은 웹페이지 즐겨찾기