Ajax 제출 전 HTML5 유효성 검사

Ajax 제출 전 HTML5 유효성 검사

이건 간단해야 하는데 날 미치게 만들어요.저는 html5 양식을 ajax와 함께 제출합니다.잘못된 값을 입력하면 팝업 응답이 나타납니다.ajax를 전송하기 전에 엔트리가 유효한지 확인하려면 어떻게 해야 합니까?

폼:

<form id="contactForm" onsubmit="return false;">
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" required placeholder="Name" />
  <label for="subject">Subject:</label>
  <input type="text" name="subject" id="subject" required placeholder="Subject" />
  <label for="email">Email:</label>
  <input type="email" name="email" id="email" required placeholder="email@example.com" />
  <label for="message">Message:</label>
  <textarea name="message" id="message" required></textarea>
  <input type="submit" id="submit"/>
</form>

송신:

$('#submit').click(function(){
    var name = $("input#name").val();
    var subject = $("input#subject").val();
    var email = $("input#email").val();
    var message = $("input#message").val();

    var dataString = 'email=' + email + '&message=' + message + '&subject=' + subject + '&name=' + name ; 

    $.ajax({
        url: "scripts/mail.php",
        type:   'POST',
        data: dataString,
        success: function(msg){
            disablePopupContact();
            $("#popupMessageSent").css("visibility", "visible");
        },
        error: function() {
            alert("Bad submit");
        }
    });
});

클릭이 아닌 송신 이벤트에 바인드 했을 경우, HTML5 검증에 합격했을 경우에만 기동합니다.

jQuery 셀렉터를 여러 번 사용할 경우 변수에 캐시하는 것이 가장 좋습니다.그러면 요소에 액세스할 때마다 DOM을 탐색할 필요가 없습니다.jQuery는 폼 데이터 해석을 처리하는 .serialize() 함수를 제공합니다.

var $contactForm = $('#contactForm');

$contactForm.on('submit', function(ev){
    ev.preventDefault();

    $.ajax({
        url: "scripts/mail.php",
        type:   'POST',
        data: $contactForm.serialize(),
        success: function(msg){
            disablePopupContact();
            $("#popupMessageSent").css("visibility", "visible");
        },
        error: function() {
            alert("Bad submit");
        }
    });
});

기본적으로 jQuery는 HTML5 검증에 대해 아무것도 모르기 때문에 다음과 같은 작업을 수행해야 합니다.

$('#submit').click(function(){
    if($("form")[0].checkValidity()) {
        //your form execution code
    }else console.log("invalid form");
});

HTML5 양식 검증을 사용하는 경우 양식의 제출 핸들러에서 Ajax 요청을 전송해야 합니다.송신 핸들러는, 폼이 유효한 경우에만 트리거 됩니다.양식 유효성 검사와 관련이 없기 때문에 항상 트리거되는 버튼 클릭 핸들러입니다.메모: 모든 브라우저가 html5 형식 검증을 지원하는 것은 아닙니다.

jQuery submit 핸들러를 사용하는 것이 좋습니다만, 다음과 같은 방법으로 폼에 대한 응답을 얻을 수 있습니다.

jQuery('#contactForm').on('submit', function (e) {
    if (document.getElementById("contactForm").checkValidity()) {
        e.preventDefault();
        jQuery.ajax({
            url: '/some/url',
            method: 'POST',
            data: jQuery('#contactForm').serialize(),
            success: function (response) {
                //do stuff with response
            }
        })
    }
    return true;
});

무슨 뜻인지 잘 모르겠네요.하지만 당신은 입력이 유효한지 실시간으로 확인하고 싶을 겁니다.이 경우 .click 이벤트 대신 .keyup을 사용해야 합니다.이는 사용자가 submit을 누르면 액션이 발생하기 때문입니다.http://api.jquery.com/keyup/ 를 참조해 주세요.

이를 통해 새로운 문자를 삽입하고 표시할 때마다 입력을 확인할 수 있습니다.검증이 true가 될 때까지 "not valid"로 설정합니다.

이게 당신의 질문에 답하길 바래요!

jquery validate 메서드를 사용하여 다음과 같은 폼을 검증할 수도 있습니다.

$("#form id").filen();

형식 검증을 기반으로 부울 값을 반환하고 errorList 메서드를 사용하여 로그에서 오류를 확인할 수 있습니다.

위의 기능을 사용하려면 스크립트에 jquery.disc.disc 파일을 포함해야 합니다.

언급URL : https://stackoverflow.com/questions/15713491/html5-validation-before-ajax-submit