클라이언트 측 JavaScript 필드 유효성 검사

Question

클라이언트 측 유효성 검사와 관련하여 약간의 도움이 필요한 특정 시나리오가 있습니다.

필수 입력 필드 (HTML 필요 없음)가 있지만 "requiredInput"클래스를 사용하여 필요에 따라 식별되며 사용자가 제출 버튼을 클릭 할 때 서버 측에서 평가됩니다.

사용자가 해당 필드에서 멀리 이동하고 채워집니다 모든 필수 필드까지 제출하지 않도록 설정합니다. 나는이 시나리오에 가야합니까 어떻게

을 때 나는, 그러나, 입력의 유효성을 검사하고자

는 클라이언트 측 필드 유효성 검사를 수행하기 위해 서버 측 제출을 기다리는 대신이 클라이언트 측을 완전하게 처리하라.

<input type="text" name="lastName" id="lastName" class="requiredInput" tabindex="3"> 

참고 :. 내가 제출에 대한 유효성 검사를 수행하지 않으려는, 내가 채워집니다 모든 필수 필드까지 제출에 onblur를 확인하고 해제하려는

Answer 1

당신은 JS의 무리가 당신이 인터넷을 찾을 수있는 검증 패키지.

현재로서는 가장 좋은 것 중 하나는 ParsleyJS입니다. 클라이언트 측에서 완벽하게 작동하는 몇 가지 기본 제공 (및 일부 추가) 유효성 검사기를 사용할 수 있습니다. 한 번 자신 만의 디자인을 할 수 있습니다. 또한 폼을 전체적으로 서버에 보내지 않으려면 필드 유효성을 검사 할 수도 있습니다. 그들이 가지고있는 경우 검사,

모든 입력 필드를 가져옵니다 validateInput() 함수를 만듭니다 : 당신이 순수 JS 솔루션을 wan't 정확히 유효 무엇을 완벽하게 제어하려면

Answer 2

이 같은 작업을 수행 할 수 있습니다 콘텐츠 (및 수행하고자하는 다른 검사)를 선택하고 모든 것이 예상대로라면 제출 버튼을 활성화하십시오. 해당 기능을 각 입력 필드의 onblur 이벤트에 연결하십시오.

function validateInput(){ 
    let validInput = true; 
    let field1Content = document.getElementById('field1').value; 
    let field2Content = document.getElementById('field2').value; 
    if(field1Content.length === 0 || field2Content === 0) 
     validInput = false; 

    if(validInput) 
    //enable submit button 
} 

Answer 3

당신은 Easly 당신이 jQuery를 경우이 아래에 시도 할 수

<input type="text" name="lastName" id="txtbox1" class="requiredInput clsValidate" tabindex="3"> 
<input type="text" name="lastName" id="txtbox2" class="requiredInput clsValidate" tabindex="3"> 
<input type="text" name="lastName" id="txtbox3" class="requiredInput clsValidate" tabindex="3"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

<script type="text/javascript"> 
     $(document).ready(function() { 
    ValidateInput(); 
}); 

$(document).on('change', 'input.clsValidate[type=text]', function() { 
    ValidateInput(); 
}); 

function ValidateInput() { 
    var cnt = 0; 
    $('input.clsValidate[type=text]').each(function (i, obj) { 
     if ($(this).val().trim().length <= 0) { 
      cnt++; 
     } 
     if (cnt > 0) { 
      $('#btnsubmit').attr('disabled', 'disabled') 
     } else { 
      $('#btnsubmit').removeAttr('disabled'); 
     } 
    }); 
} 
</script>