0

フォームを検証する方法を学習しようとしていますが、次の問題があります。

このコードを実行して何も入力しない場合、フォームは送信されませんが、送信されます。私の質問は...なぜ、そしてどうすればそれを修正できますか？

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

コードが取ることができる他の改善を知っているなら、あなたも私に言うことができます、ありがとう.. :-)

4

4 に答える 4

3

これを変える：

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

これに：

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

フォームが有効な場合は、これを実行します（.submit関数内で）。

$(this).submit();

フォームが送信されます。

于 2009-07-22T21:56:08.990 に答える
3

errorCount は each メソッドに渡された無名関数に対してローカルであるため、現在のコードは機能していません。外から見えなくなります。

これはerrorCount > 0、各メソッドの後に実行すると、false と評価されてフォームが送信されることを意味します。

私はあなたの関数をこのように書きます、

$('#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.');
    }
);

編集：

コードが機能しないのはなぜですか?

「.each」メソッドに渡される無名関数 (myEachLoop など) に名前を付けましょう。

$('#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 クロージャーを理解する必要があります。

于 2009-07-22T22:07:10.170 に答える
0

このjQueryプラグインを試してみることをお勧めします。非常に柔軟で使いやすいです。

于 2009-07-22T22:00:35.940 に答える
0

スコープが正しいことを確認するために、ループの前にエラー カウントを宣言します。

var errorCount = 0;
$('.required').each(function() {
    if($(this).val() == "") {                               
        errorCount++;           
    } 
});
于 2009-07-22T22:05:27.630 に答える