jQuery Form Validation- '제출 ()'문제

Question

양식을 검증하는 방법을 배우려고 노력하고 있으며이 문제가 있습니다.

이 코드를 실행하고 아무것도 입력하지 않으면 양식이 보내지 말아야하지만 그렇습니다. 내 질문은 ... 왜, 어떻게 고칠 수 있습니까?

HTML :

<form method="post" action="#">
<fieldset>
<legend>Formular</legend>
<label for="name">Name: </label>
<input type="text" class="required" name="name" value="" />
<br /><br />
<label for="pass">Password: </label>
<input type="password" class="required" name="pass" value="" />
<br /><br />
<input type="submit" value="Submit!" />
</fieldset>
</form>

jQuery :

$('#obal form').submit(function() { 
    $('.required').each(function() {
        if($(this).val() == "") {                   
            if (errorCount === undefined) {
                    var errorCount = 1;
            } else {
                ++errorCount;
            } 
        } 
    }); 

    if (errorCount > 0) {
        window.alert( 'You didnt pass' );
        return false;
    } else {
        return true;
    }   
});

코드가 취할 수있는 다른 개선 사항을 알고 있다면 감사합니다 .. :-)

Answer 1

ErrorCount가 각 메소드에 전달되는 익명 함수에 로컬이므로 현재 코드가 작동하지 않습니다. 외부에서는 보이지 않습니다.

이것은 당신이 할 때를 의미합니다 errorCount > 0 각 방법 후에는 거짓으로 평가하고 양식을 제출합니다.

나는 당신의 기능을 이렇게 쓸 것입니다.

$('#obal form').submit(
    function(ev) 
    { 
        var errorCount = 0; //define your errorCount variable to zero before you 
                            //iterate using each, errorCount will be available inside your each iteration function.
        $('.required').each(
            function() 
            {
                //Due to JavaScript clousures, you can access errorCount in this function.
                if($(this).val() === '')
                    errorCount++;  
            }
        );

        //If we don't find any errors, we return. This will let the browser continue submitting the form.      
        if(errorCount == 0)
            return;

        //If control comes here, it means there were errors. Prevent form submission and display error message.
        ev.preventDefault();
        alert('Validation failure.');
    }
);

편집하다:

코드가 작동하지 않는 이유는 무엇입니까?

익명 함수 (예 : MyeachLoop)에 이름을 지정하여 '.Each'메소드로 전달합시다.

$('#obal form').submit(function() { 
$('.required').each(

  function myEachLoop () 
  {
    if($(this).val() == "") {                               
        if (errorCount === undefined) {
                var errorCount = 1; //you have defined the errorCount which is 'local' to the 'myEachLoop' function. Once myEachLoop function is over. errorCount variable is gone! 

        } else {
            ++errorCount;
        } 
    } 
}); 

//errorCount is 'undefined' here because the previously defined errorCount variable is gone.
if (errorCount > 0) {
    window.alert( 'You didnt pass' );
    return false;
} else {
    return true;
}   
});

이제 코드에서 실수를 보십니까?

또한 내 코드가 작동하는 이유를 알기 위해 JavaScript 폐쇄를 이해해야합니다.

Answer 2

이것을 변경하십시오 :

$('#obal form').submit(function() {

이에:

$('#obal form').submit(function(event) {
    event.preventDefault();

양식이 유효 한 경우 (.submit 함수 내에서) 이것을 수행하십시오.

$(this).submit();

그리고 귀하의 양식이 제출됩니다.

Answer 3

이 jquery를 시도하고 싶을 수도 있습니다 플러그인. 매우 유연하고 사용하기 쉽습니다.

Answer 4

루프 전에 오류 수를 선언하여 범위가 올바른지 확인합니다.

var errorCount = 0;
$('.required').each(function() {
    if($(this).val() == "") {                               
        errorCount++;           
    } 
});