HTML5 양식 유효성 검사 트리거

Question 1

여러 필드 세트가있는 양식이 있습니다. 필드 세트를 한 번에 하나씩 사용자에게 표시하는 Javascript가 있습니다. HTML5 유효성 검사를 지원하는 브라우저의 경우이를 활용하고 싶습니다. 하지만 내 방식대로해야합니다. JQuery를 사용하고 있습니다.

사용자가 JS 링크를 클릭하여 다음 필드 셋으로 이동하면 현재 필드 셋에서 유효성 검사가 발생하고 문제가있는 경우 사용자가 앞으로 이동하지 못하도록 차단해야합니다.

이상적으로는 사용자가 요소에 대한 초점을 잃으면 유효성 검사가 발생합니다.

현재 novalidate가 Javascript를 사용하고 있습니다. 기본 방법을 사용하고 싶습니다. :)

Question 2

네이티브 유효성 검사 UI를 트리거 할 수는 없지만 임의의 입력 요소에서 유효성 검사 API를 쉽게 활용할 수 있습니다.

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

첫 번째 이벤트 checkValidity는 포커스를 잃는 즉시 모든 입력 요소에서 발생합니다. 요소가 있으면 invalid해당 이벤트가 발생하고 두 번째 이벤트 핸들러에 의해 트랩됩니다. 이것은 초점을 다시 요소로 설정하지만 매우 성 가실 수 있습니다. 오류에 대해 알리는 데 더 나은 솔루션이 있다고 가정합니다. 위의 내 코드의 작동 예가 있습니다.

Question 3

TL; DR : 오래된 브라우저는 신경 쓰지 않습니까? 사용 form.reportValidity().

레거시 브라우저 지원이 필요하십니까? 읽어.

그것은 사실 입니다 수동으로 트리거 유효성 검사 가능.

재사용 가능성을 높이기 위해 내 대답에 일반 JavaScript를 사용하겠습니다. jQuery는 필요하지 않습니다.

다음 HTML 양식을 가정하십시오.

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

그리고 JavaScript에서 UI 요소를 가져옵니다.

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

Internet Explorer와 같은 레거시 브라우저에 대한 지원이 필요하지 않습니까? 이건 널위한거야.

모든 최신 브라우저 는 요소에 대한 방법을 지원 합니다 .reportValidity()form

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

그게 다야. 또한 이 접근 방식을 사용 하는 간단한 CodePen 이 있습니다.

구형 브라우저에 대한 접근 방식

다음은 reportValidity()이전 브라우저에서 어떻게 에뮬레이션 할 수 있는지에 대한 자세한 설명 입니다.

그러나 이러한 코드 블록을 프로젝트에 직접 복사하여 붙여 넣을 필요는 없습니다 . 쉽게 사용할 수 있는 포니 필 / 폴리 필 이 있습니다.

reportValidity()지원되지 않는 곳 에서는 브라우저를 약간 속일 필요가 있습니다. 그래서 우리는 무엇을할까요?

을 호출하여 양식의 유효성을 확인하십시오 form.checkValidity(). 양식이 유효한지 여부는 알려주지 만 유효성 검사 UI는 표시되지 않습니다.
양식이 유효하지 않은 경우 임시 제출 버튼을 만들고 클릭을 트리거합니다. 형식이 유효하지 않기 때문에, 우리가 알고 그것을하지 않습니다 실제로 하지만, 사용자에게 검증 힌트를 표시합니다, 제출합니다. 임시 제출 버튼은 즉시 제거되므로 사용자에게 표시되지 않습니다.
양식이 유효하면 우리는 전혀 방해 할 필요가 없으며 사용자가 계속 진행하도록합니다.

코드에서 :

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 예제입니다.

Question 4

어느 정도는 할 수 있습니다. trigger HTML5 양식 유효성 검사를 수행하고 양식을 제출하지 않고도 사용자에게 힌트를 표시 할 수 있습니다!

두 개의 버튼, 하나는 검증 용, 하나는 제출 용

세트 onclick글로벌 플래그 (예를 들어를 설정하는 유효성 검사 버튼에 리스너를 justValidate이 클릭을 표시하기 위해이) 양식의 유효성을 확인하기위한 것입니다.

그리고 onclick제출 버튼에 리스너를 설정하여 justValidate플래그를 false 로 설정하십시오 .

그런 다음 onsubmit양식 의 처리기에서 플래그 justValidate를 확인 하여 반환 값을 결정하고를 호출하여 preventDefault()제출할 양식을 중지합니다. 아시다시피 HTML5 양식 유효성 검사 (및 사용자에 대한 GUI 힌트)는 onsubmit이벤트 전에 수행 되며 양식이 유효하더라도 false를 반환하거나 invoke를 반환하여 양식 제출을 중지 할 수 있습니다 preventDefault().

그리고 HTML5에는 양식의 유효성을 확인하는 방법이 있습니다. form.checkValidity() , 그러면 양식이 코드에서 유효성이 검사되는지 여부를 알 수 있습니다.

좋아요, 여기 데모가 있습니다 : http://jsbin.com/buvuku/2/edit

Question 5

A List Apart에 게시 된이 기사가이 기사를 잘 설명하고 있기 때문에이 모든 것을 처음부터 입력 할 가치가 있는지 모르겠습니다 . MDN에는 HTML5 양식 및 유효성 검사 (API 및 관련 CSS 포함)에 대한 편리한 가이드 도 있습니다.

Question 6

필드 세트에 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);

    });

});

Question 7

트릭을 찾은 것 같습니다. 양식 target속성을 제거한 다음 제출 버튼을 사용하여 양식을 확인하고 힌트를 표시하고 JavaScript를 통해 양식이 유효한지 확인한 다음 무엇이든 게시하십시오. 다음 코드가 저에게 효과적입니다.

<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>

Question 8

Html 코드 :

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

javascript (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>

이것이 당신을 도울 수 있기를 바랍니다

Question 9

var field = $("#field")
field.keyup(function(ev){
    if(field[0].value.length < 10) {
        field[0].setCustomValidity("characters less than 10")
        
    }else if (field[0].value.length === 10) {
        field[0].setCustomValidity("characters equal to 10")
        
    }else if (field[0].value.length > 10 && field[0].value.length < 20) {
        field[0].setCustomValidity("characters greater than 10 and less than 20")
        
    }else if(field[0].validity.typeMismatch) {
    	field[0].setCustomValidity("wrong email message")
        
    }else {
    	field[0].setCustomValidity("") // no more errors
        
    }
    field[0].reportValidity()
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="email" id="field">

스 니펫 확장

Question 10

입력 필드 용

<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");
        }
    })

Question 11

매우 복잡한 (특히 비동기) 유효성 검사 프로세스가있는 경우 간단한 해결 방법이 있습니다.

<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>

Question 12

이 문제를 해결하는 또 다른 방법 :

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