Jquery 기본 폼 유효성 검사

Question

무거운 one-size-fits-all 플러그인에 의존하지 않고 직접 기본 폼 유효성 검사를 만들고 다음 코드를 작성했습니다. 내가 얼마나 자주 그것을 다시 작성하고 다시 시작 하느냐에 상관없이, 나는 그것을 작동시키는 것처럼 보이지 않는다.

아이디어는 스크립트가 양식을 검사하여 모든 필드가 완료되었는지 확인한 후 제출 버튼에서 사용 불가능한 속성을 제거합니다.

기능 : -

function checkForm(){ 
$('#contact :input').each(function(){ 
    if($(this).attr('value') == null){ 
    var checked = false; 
    } else { 
    var checked = true; 
    } 
}) 
if (checked == true){ 
    alert('all filled in'); 
    //remove disabled attribute from button 
} else { 
    alert('not completed'); 
    //add disabled attribute to button 
} 

} 

그리고 함수를 호출하는 코드 : -

$('#contact :input').blur(function(){ 
    if ($(this).val() <= ''){ 
     $(this).next('.error').show(); 
    } else { 
     $(this).next('.error').hide(); 
     checkForm(); 
    } 
}) 

나는 모든 일이에 대해 장난 봤는데 Google을 통해 답을 찾기 위해 고군분투 .

Answer 1

function checkForm(){ 
    var checked = true; 
    $('#contact :input').each(function(){ 
    if(!$.trim($(this).val()).length) checked = false; 
    }) 
    if (checked){ 
    alert('all filled in'); 
    //remove disabled attribute from button 
    } else { 
    alert('not completed'); 
    //add disabled attribute to button 
    } 
} 

그리고 함수를 호출하는

$('#contact :input').on('blur', function(){ 
    if (!$.trim($(this).val()).length){ 
     $(this).next('.error').show(); 
    } else { 
     $(this).next('.error').hide(); 
     checkForm(); 
    } 
}) 

Answer 2

이에 대한 jquery.validate() 함수를 사용하고 참조 URL은 다음과 같습니다 http://docs.jquery.com/Plugins/Validation이

Answer 3

수정 :

function checkForm(){ 
$('#contact :input').each(function(){ 
if($(this).val() == ''){ 
    var checked = false; 
    } else { 
var checked = true; 
} 
}) 
if (checked == true){ 
alert('all filled in'); 
//remove disabled attribute from button 
} else { 
alert('not completed'); 
//add disabled attribute to button 
} 

} 

및

$('#contact :input').blur(function(){ 
if ($(this).val() == ''){ 
    $(this).next('.error').show(); 
} else { 
    $(this).next('.error').hide(); 
    checkForm(); 
} 
}) 

Answer 4

당신이 '는를 만드는 때문에 checked 변수가 .each()의 익명 함수 내에서 'checked'변수가 아닌 경우 해당 함수 외부에서 사용할 수 없습니다 (checked == true) 테스트 ('checked is undefined'오류 발생) 그래서 당신의 경고가 발사되지 않습니다.

먼저 익명 함수 외부에서 'checked'변수를 정의한 다음 적절히 업데이트하십시오.

function checkForm() { 

    var checked = true; 

    $('#contact :input').each(function() { 
     if ($(this).val() == '') { 
      checked = false; 
     } 
    }) 

    if (checked == true) { 
     alert('all filled in'); 
     //remove disabled attribute from button 
    } else { 
     alert('not completed'); 
     //add disabled attribute to button 
    } 

} 

$('#contact :input').blur(function() { 
    if ($(this).val() == '') { 
     $(this).next('.error').show(); 
    } else { 
     $(this).next('.error').hide(); 
     checkForm(); 
    } 
}) 

다음은 jsFiddle 예제입니다. http://jsfiddle.net/DMLzK/1/