jQuery를 사용하여 수동으로 양식 유효성 검사 트리거링

jQuery를 사용하여 수동으로 양식 유효성 검사 트리거링

저는 여러 가지 다른 필드 세트가 있는 양식을 가지고 있습니다.사용자에게 필드 세트를 한 번에 하나씩 보여주는 jQuery가 있습니다.HTML5 검증을 지원하는 브라우저라면 활용하고 싶습니다.하지만 저는 제 조건대로 해야 합니다.JQuery를 사용하고 있습니다.

사용자가 JS Link를 클릭하여 다음 필드셋으로 이동할 때 현재 필드셋에서 유효성 검사를 수행하고 문제가 있을 경우 사용자가 앞으로 이동하지 못하도록 차단해야 합니다.

이상적으로, 사용자가 요소에 대한 초점을 잃으면 유효성 검사가 수행됩니다.

현재 jQuery에 가서 사용하는 유효성 검사가 없습니다.네이티브 메소드를 사용하고 싶습니다.:)

TL;DR: 오래된 브라우저는 신경 안 써요?사용.

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

---

실제로 수동으로 유효성 검사를 트리거할 수 있습니다.

재사용성을 개선하기 위해 답변에 단순한 자바스크립트를 사용하겠습니다. jQuery는 필요 없습니다.

---

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

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

이제 자바스크립트로 UI 요소를 살펴보겠습니다.

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

---

Internet Explorer와 같은 레거시 브라우저에 대한 지원이 필요 없습니까?이거 선물이예요.

모든 최신 브라우저는 다음과 같은 방법을 지원합니다.form요소들.

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

다 됐어요, 다 끝났어요.그리고 이 방법을 사용하는 간단한 코드펜이 있습니다.

---

이전 브라우저에 대한 접근 방식

아래에 자세한 설명이 있습니다.reportValidity()오래된 브라우저에서 에뮬레이트할 수 있습니다.

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

reportValidity()지원되지 않습니다. 브라우저를 조금 속여야 합니다.그럼 어떻게 하죠?

1. 하여 의 에 전화하여 양식의 합니다.form.checkValidity() 하면 는 알 수 있지만 검사. 이렇게 하면 양식이 유효한지 여부는 알 수 있지만 유효성 확인 UI는 표시되지 않습니다.
2. 양식이 올바르지 않으면 임시 제출 버튼을 만들고 클릭을 트리거합니다.양식이 유효하지 않기 때문에 실제로 제출하지는 않지만 사용자에게 유효성 확인 힌트를 보여줄 것입니다.임시 제출 버튼을 즉시 제거하여 사용자에게 절대 보이지 않도록 하겠습니다.
3. 양식이 유효하다면 전혀 간섭할 필요가 없고 사용자가 진행하도록 합니다.

---

코드명:

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까지 성공적으로 테스트했습니다).

여기 작동하는 코드펜 예가 있습니다.

네이티브 유효성 검사 UI를 트리거할 수 없습니다. (아래 편집 참조). 하지만 임의 입력 요소에 대한 유효성 검사 API를 쉽게 이용할 수 있습니다.

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

첫번째 사건은 불을 뿜어져라.checkValidity을 잃자마자에서, 그 을력에든가약자가e약n,에을invalid그러면 해당 이벤트는 두 번째 이벤트 핸들러에 의해 발사되고 트랩됩니다.이것은 다시 초점을 요소로 되돌리지만, 그것은 꽤 성가신 일일 수 있습니다. 오류를 알리기 위한 더 나은 해결책이 있다고 생각합니다.위의 제 코드의 작동 예시가 여기 있습니다.

편집: 모든 최신 브라우저는 이 답변에 따라 기본 HTML5 검증 방법을 지원합니다.

어느 정도는, 당신은 할 수 있습니다.triggerHTML5 양식 유효성 확인 및 양식 제출 없이 사용자에게 힌트 제시!

버튼 2개, 유효성 확인용, 제출용

a를 합니다.onclick플래그를 (listener) (예:벌를면너r서예(r너(:)예e )justValidate(이을 클릭하면 양식의 유효성을 확인할 수 있습니다.

세트 a로 합니다.onclick에서 submit에서 listener를다e을 합니다.justValidate거짓으로 기명하다

에.onsubmit양식의 핸들러, 당신은 깃발을 확인합니다.justValidate환을고다를 호출합니다.preventDefault()제출할 양식을 중지합니다.아시다시피 HTML5 양식 검증(및 사용자에게 GUI 힌트)은 사전에 수행됩니다.onsubmitevent,에도 false를 하거나 false, false, false를 호출하여 제출된 할 수 .preventDefault().

할 수 . 즉, HTML5의 유효성을 확인할 수 있는 것입니다.form.checkValidity()알 수 . , 이 에서 한지 를 를 이 한지 .

자, 데모는 다음과 같습니다. http://jsbin.com/buvuku/2/edit

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

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

    });

});

그 방법을 찾은 것 같습니다. 그냥 양식을 제거하세요.target속성을 지정한 다음 제출 버튼을 사용하여 양식의 유효성을 확인하고 힌트를 표시하고 자바스크립트를 통해 양식이 유효한지 확인한 다음 무엇이든 게시합니다.저는 다음 코드를 사용할 수 있습니다.

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

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>

이것이 당신에게 도움이 되기를 바랍니다.

입력 필드용

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

$('#id').get(0).reportValidity();

ID를 지정한 상태에서 입력을 트리거합니다.클래스에는 ".classname"을(를) 사용합니다.

이 함수 보고서Validity()는 항상 부울 값을 반환합니다.기본 JS 기능이기 때문에 jQuery로 전화하면 안 된다는 것도 알아두셔야 합니다.

다음과 같은 예를 수행할 수 있습니다.

<script>
if (document.getElementById('frmUser').reportValidity()) { 
    $('#frmUser').submit();
}
</script>

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

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

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

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

언급URL : https://stackoverflow.com/questions/7548612/manually-triggering-form-validation-using-jquery