복붙노트

[JQUERY] HTML5 폼 검증을 트리거링

JQUERY

HTML5 폼 검증을 트리거링

해결법

  1. 1.당신은 기본 검증 UI를 트리거 할 수 없지만, 당신은 쉽게 임의의 입력 요소에 대한 검증 API를 활용할 수 있습니다 :

    당신은 기본 검증 UI를 트리거 할 수 없지만, 당신은 쉽게 임의의 입력 요소에 대한 검증 API를 활용할 수 있습니다 :

    $('input').blur(function(event) {
    event.target.checkValidity();
}).bind('invalid', function(event) {
    setTimeout(function() { $(event.target).focus();}, 50);
});

    요소는 다음 해당 이벤트가 발생하고 두 번째 이벤트 핸들러에 의해 갇혀됩니다 무효 인 경우는, 포커스를 잃고 빨리으로 첫 번째 이벤트는 모든 입력 요소에 checkValidity을 발생합니다. 이 하나 개의 세트 초점 요소에 다시,하지만 매우 성가신 될 수있다, 나는 당신이 오류에 대한 통지를위한 더 나은 솔루션을 가정합니다. 여기에 위의 내 코드의 작동 예입니다.

  2. 2.TL; DR : 오래된 브라우저에 대한 배려하지? 사용 form.reportValidity ().

    TL; DR : 오래된 브라우저에 대한 배려하지? 사용 form.reportValidity ().

    기존 브라우저 지원이 필요하십니까? 읽어.

    실제로 수동으로 트리거 확인 가능하다.

    내가 재사용 성을 향상시키기 위해 내 대답에 일반 자바 스크립트를 사용합니다, 더 jQuery를 필요하지 않습니다.

    다음 HTML 양식을 가정합니다 :

    <form>
  <input required>
  <button type="button">Trigger validation</button>
</form>

    그리고의 자바 스크립트에 우리의 UI 요소를 잡아 보자 :

    var form = document.querySelector('form')
var triggerButton = document.querySelector('button')

    인터넷 익스플로러와 같은 기존 브라우저에 대한 지원이 필요하지 않습니까? 이건 널위한거야.

    모든 최신 브라우저는 폼 요소에 reportValidity () 메소드를 지원합니다.

    triggerButton.onclick = function () {
    form.reportValidity()
}

    그거야 그, 우리는 완료됩니다. 또한, 여기에이 방법을 사용하여 CodePen 간단한이다.

    이전 버전의 브라우저에 대한 접근

    reportValidity ()가 지원되지 않는 경우, 우리는 브라우저에게 약간의 트릭을해야합니다. 그래서, 우리는 무엇을 할 것인가?

    코드에서 :

    triggerButton.onclick = function () {
  // Form is invalid!
  if (!form.checkValidity()) {
    // Create the temporary button, click and remove it
    var tmpSubmit = document.createElement('button')
    form.appendChild(tmpSubmit)
    tmpSubmit.click()
    form.removeChild(tmpSubmit)

  } else {
    // Form is valid, let the user proceed or do whatever we need to
  }
}

    이 코드는 (내가 IE11에 성공적으로 아래를 테스트 한) 거의 모든 일반적인 브라우저에서 작동합니다.

    다음은 작업 CodePen의 예입니다.

  3. 3.어느 정도에서, 당신은 양식을 제출하지 않고 사용자에게 HTML5 양식 유효성 검사 및 쇼 힌트 수 있습니다!

    어느 정도에서, 당신은 양식을 제출하지 않고 사용자에게 HTML5 양식 유효성 검사 및 쇼 힌트 수 있습니다!

    두 버튼 유효성 검사를위한 하나, 하나 개의 형태로 제출

    글로벌 플래그를 설정하는 유효성 검사 버튼에 온 클릭 리스너 설정이 클릭이 양식의 유효성을 확인하기위한 것입니다 나타냅니다 (justValidate 말).

    (가) false로 justValidate 플래그를 설정 버튼을 제출에 그리고 온 클릭 리스너를 설정합니다.

    그런 형태의 태그의 onsubmit 핸들러에서, 당신은 반환 값을 결정하는 플래그 justValidate을 확인하고로 preventDefault ()를 호출 제출 양식을 중지 할 수 있습니다. 당신이 알고있는 것처럼, HTML5 폼 검증 (및 사용자에게 GUI 힌트) 태그의 onsubmit 이벤트 전에 미리 형성하고, 양식이 유효한 경우에도 사용자가 양식에서 preventDefault 거짓을 반환하여 나있는 invoke 제출 중지 할 수 있습니다 ().

    그리고, HTML5에서 폼의 유효성을 확인하는 방법이 있습니다 양식 코드에서 유효성을인지 경우 form.checkValidity을 (), 당신은 알 수있다.

    OK, 여기 데모입니다 : http://jsbin.com/buvuku/2/edit

  4. 4.목록의 출판이 문서는 별개로 그것을 설명하는 아주 좋은 작업을 수행하기 때문에 저를 처음부터이 모든 걸 포기를 입력 할 수있는 나는 확실히 그것의 가치를 아니에요. MDN은 (는 API와도 관련 CSS를 포함하는) HTML5 양식 및 검증을위한 편리한 가이드가 있습니다.

    목록의 출판이 문서는 별개로 그것을 설명하는 아주 좋은 작업을 수행하기 때문에 저를 처음부터이 모든 걸 포기를 입력 할 수있는 나는 확실히 그것의 가치를 아니에요. MDN은 (는 API와도 관련 CSS를 포함하는) HTML5 양식 및 검증을위한 편리한 가이드가 있습니다.

  5. 5.다소 쉽게 필드 셋에 추가 또는 제거 HTML5 유효성을 확인합니다.

    다소 쉽게 필드 셋에 추가 또는 제거 HTML5 유효성을 확인합니다.

     $('form').each(function(){

    // CLEAR OUT ALL THE HTML5 REQUIRED ATTRS
    $(this).find('.required').attr('required', false);

    // ADD THEM BACK TO THE CURRENT FIELDSET
    // I'M JUST USING A CLASS TO IDENTIFY REQUIRED FIELDS
    $(this).find('fieldset.current .required').attr('required', true);

    $(this).submit(function(){

        var current     = $(this).find('fieldset.current')
        var next        = $(current).next()

        // MOVE THE CURRENT MARKER
        $(current).removeClass('current');
        $(next).addClass('current');

        // ADD THE REQUIRED TAGS TO THE NEXT PART
        // NO NEED TO REMOVE THE OLD ONES
        // SINCE THEY SHOULD BE FILLED OUT CORRECTLY
        $(next).find('.required').attr('required', true);

    });

});

  6. 6.나는 트릭을 찾을 수가 : 그냥 양식 대상 속성을 제거하고 다음 자바 스크립트를 통해 유효하고, 형태는 무엇을 게시 할 경우이 힌트 확인 양식을 검증하기 위해 버튼을 제출하고 보여 사용합니다. 다음 코드는 나를 위해 작동합니다 :

    나는 트릭을 찾을 수가 : 그냥 양식 대상 속성을 제거하고 다음 자바 스크립트를 통해 유효하고, 형태는 무엇을 게시 할 경우이 힌트 확인 양식을 검증하기 위해 버튼을 제출하고 보여 사용합니다. 다음 코드는 나를 위해 작동합니다 :

    <form>
  <input name="foo" required>
  <button id="submit">Submit</button>
</form>

    <script>
$('#submit').click( function(e){
  var isValid = true;
  $('form input').map(function() {
    isValid &= this.validity['valid'] ;
  }) ;
  if (isValid) {
    console.log('valid!');
    // post something..
  } else
    console.log('not valid!');
});
</script>

  7. 7.HTML 코드 :

    HTML 코드 :

    <form class="validateDontSubmit">
....
<button style="dislay:none">submit</button>
</form>
<button class="outside"></button>

    자바 스크립트 (jQuery를 사용하여) :

    <script type="text/javascript">

$(document).on('submit','.validateDontSubmit',function (e) {
    //prevent the form from doing a submit
    e.preventDefault();
    return false;
})

$(document).ready(function(){
// using button outside trigger click
    $('.outside').click(function() {
        $('.validateDontSubmit button').trigger('click');
    });
});
</script>

    이 당신을 도울 것입니다 희망

  8. 8.VAR 필드 = $ ( "# 필드") field.keyup (함수 (EV) { 경우 (필드 [0] .value.length <10) { 필드의 [0] .setCustomValidity ( "문자 (10)보다 덜") } 다른 경우 (필드 [0] .value.length === 10) { 필드의 [0] .setCustomValidity ( "문자 (10)와 동일한") } 다른 경우 (필드 [0] .value.length> 10 && 필드 [0] .value.length <20) { 필드의 [0] .setCustomValidity ( "10 미만 20 이상 문자") } 다른 경우 (필드 [0] .validity.typeMismatch) { 필드 [0] .setCustomValidity ( "잘못된 이메일 메시지") } 다른 { 필드의 [0] .setCustomValidity ( "") // 더 에러 } 필드의 [0] .reportValidity () }); <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

    VAR 필드 = $ ( "# 필드") field.keyup (함수 (EV) { 경우 (필드 [0] .value.length <10) { 필드의 [0] .setCustomValidity ( "문자 (10)보다 덜") } 다른 경우 (필드 [0] .value.length === 10) { 필드의 [0] .setCustomValidity ( "문자 (10)와 동일한") } 다른 경우 (필드 [0] .value.length> 10 && 필드 [0] .value.length <20) { 필드의 [0] .setCustomValidity ( "10 미만 20 이상 문자") } 다른 경우 (필드 [0] .validity.typeMismatch) { 필드 [0] .setCustomValidity ( "잘못된 이메일 메시지") } 다른 { 필드의 [0] .setCustomValidity ( "") // 더 에러 } 필드의 [0] .reportValidity () }); <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

  9. 9.입력 필드

    입력 필드

    <input id="PrimaryPhNumber" type="text" name="mobile"  required
                                       pattern="^[789]\d{9}$" minlenght="10" maxLength="10" placeholder="Eg: 9444400000"
                                       class="inputBoxCss"/>

    $('#PrimaryPhNumber').keyup(function (e) {
        console.log(e)
        let field=$(this)
        if(Number(field.val()).toString()=="NaN"){
            field.val('');
            field.focus();
            field[0].setCustomValidity('Please enter a valid phone number');
            field[0].reportValidity()
            $(":focus").css("border", "2px solid red");
        }
    })

  10. 10.매우 복잡한 (특히 비동기) 검증 프로세스가있을 때 간단한 해결 방법은 :

    매우 복잡한 (특히 비동기) 검증 프로세스가있을 때 간단한 해결 방법은 :

    <form id="form1">
<input type="button" onclick="javascript:submitIfVeryComplexValidationIsOk()" />
<input type="submit" id="form1_submit_hidden" style="display:none" />
</form>
...
<script>
function submitIfVeryComplexValidationIsOk() {
    var form1 = document.forms['form1']
    if (!form1.checkValidity()) {
        $("#form1_submit_hidden").click()
        return
    }

    if (checkForVeryComplexValidation() === 'Ok') {
         form1.submit()
    } else {
         alert('form is invalid')
    }
}
</script>

  11. 11.또 다른 방법은이 문제를 해결하려면 :

    또 다른 방법은이 문제를 해결하려면 :

    $('input').oninvalid(function (event, errorMessage) {
    event.target.focus();
});

    12. from https://stackoverflow.com/questions/7548612/triggering-html5-form-validation by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 자바 스크립트 / jQuery를하여 CSS 클래스에서 스타일 속성을 얻으려면?  (0) 2020.10.15
[JQUERY] jQuery를 : 라이브 () 대표 대 ()  (0) 2020.10.15
[JQUERY] 주문은 <UL> / <OL>에서 jQuery를 가장 쉬운 방법은 무엇입니까?  (0) 2020.10.15
[JQUERY] 어떻게 jQuery를 사용하여 IFrame을의 DOM을 노출?  (0) 2020.10.15
[JQUERY] 키를 입력 시뮬레이션 JQuery와 (또는 순수 JS)의 테스트를 누르면  (0) 2020.10.15
,

티스토리툴바