0

だから、私は Javascript を初めて使い、jQuery を初めて使いました。このプロジェクト atm に取り組んで、私は Javascript から始めましたが、私の問題に対する解決策の多くは jQuery の方がはるかに簡単でした。

したがって、すべてのフォームが検証に合格していない場合、基本的にユーザーが送信を押すのを防ぐJavaScriptがあります。

だからここは私のフィールドです。

<td><input type="password" maxlength="16" name="passwd" id="passwd" onblur="validatePassword(this.value)" /></td>
<td><span id="pMess"></span></td>

これは私の提出物です。

<td><input type="submit" value="Register" onclick="return validate(this.form)"/></td>
<td><a href='Index.php'>Login?</a></td>

送信を押すとわかるように、次の検証機能に移動します。

function validate(theForm) {
    var valid = true;

    if ( !validateEmail(theForm.emailrec.value) ) valid = false;
    if ( !validatePassword(theForm.passwd.value) ) valid = false;
    if ( !validatePostcode(theForm.postcode.value) ) valid = false;
    if ( valid ) return true;
    else return false;
}

最後にフィールドチェッカーです。

function validatePassword(passwordString) {
   var valid = true;

   if ( passwordString == "" ) {
      feedback('pMess','Enter your password here');
      valid = false;
   } else if ( passwordString.length <= 5 ){
      feedback('pMess','Password too short');
      valid = false;
   } else feedback('pMess','Acceptable');

   if ( valid ) return true;
   else return false;
}

私のユーザー名フィールドチェッカーは、jQuery にあるため少し異なります

$(document).ready(function() {
    $('#username').keyup(username_check);
});

function username_check() { 
    var username = $('#username').val();
    if(username == "" || username.length < 6){
        $('#username').css('border', '3px #CCC solid');
        $('#tick').hide();
        $('#cross').fadeIn();
    } else {
        jQuery.ajax({
            type: "POST",
            url: "check.php",
            data: 'username=' + username,
            cache: false,
            success: function(response){
                if(response == 1) {
                    $('#username').css('border', '3px #C33 solid'); 
                    $('#tick').hide();
                    $('#cross').fadeIn();
                } else {
                    $('#username').css('border', '3px #090 solid');
                    $('#cross').hide();
                    $('#tick').fadeIn();
                }
            }
        });
    }
}

だから私がやろうとしているのは、他のフィールドチェッカーのようにusername_checkを返すことです。リターンなどをどこに置くべきかについて、助けを求めているだけです。私が何をしようとしても、コードが壊れているようです...

私がこれまでに持っているすべて

 if ( !check_username(theForm.username.value) ) valid = false;

私を正しい方向に向けるための助けは大歓迎です。

4

2 に答える 2

1

問題は jQuery ではありません。問題は、検証の一部を行うために非同期呼び出しを使用していることです。 jQuery.ajaxは非同期です。つまり、フェッチ中もコードは実行され続けますcheck.php。つまり、応答が戻ってくるまでに、username_check()はすでにフォームを返し、送信しています (または送信をキャンセルしています)。

コードの非 AJAX 部分 (長さのチェック) については、return問題なく実行できます。

function username_check() { 
    var username = $('#username').val();

    // NOTE: This is redundant, as "" has length 0
    if(username == "" || username.length < 6){ 
        $('#username').css('border', '3px #CCC solid');
        $('#tick').hide();
        $('#cross').fadeIn();
        return false;   // This will work here
    } else {
        // AJAX stuff
    }
}

残念ながら、残りはもう少しトリッキーになります。本当にやりたいことは、ユーザー名のチェックが完了するまでフォームを送信するのを待つことです。これは、送信をコールバック関数 (つまり、successAJAX の一部) に入れる必要があることを意味します。AJAX 呼び出しが 1 つしかない場合、これはそれほど悪くありません。複数の AJAX 呼び出しがある場合は、すべての呼び出しをネストする必要があります (これにより、コードが長くなり、あまりきれいではなく、失敗した後に他のチェックに簡単に進むことができなくなります)、または遅延オブジェクトを使用する必要があります(または、これは些細なことではありません (しかし非常に便利です)。

ユーザー名の単一の AJAX 呼び出しがあると仮定します。

まず、送信ボタンに ID を追加します。これにより、jQuery からの参照が容易になります。

<td><input id="mysubmit" type="submit" value="Register" onclick="return validate(this.form)"/></td>
<td><a href='Index.php'>Login?</a></td>

次に、他のすべてのチェックの後にユーザー名チェックを行い、他のチェックが有効である場合にのみ送信します。

function validate(theForm) {
    var valid = true;

    if ( !validateEmail(theForm.emailrec.value) ) valid = false;
    if ( !validatePassword(theForm.passwd.value) ) valid = false;
    if ( !validatePostcode(theForm.postcode.value) ) valid = false;

    // The non-AJAX checks for username length:
    var username = theForm.username.value;
    if ( !validateUsername(username) ) valid = false;

    jQuery.ajax({
        type: "POST",
        url: "check.php",
        data: 'username=' + username,
        cache: false,
        success: function(response){
            if(response == 1) {
                $('#username').css('border', '3px #C33 solid'); 
                $('#tick').hide();
                $('#cross').fadeIn();
            } else {
                $('#username').css('border', '3px #090 solid');
                $('#cross').hide();
                $('#tick').fadeIn();

                // If the other checks were OK, submit the form manually
                if(valid) {
                    $("#mysubmit").submit();
                }
            }
        }
    });

    // ALWAYS return false.  
    // We will submit the form manually if the checks are OK
    // For now, prevent the submit
    return false;
}

わかる？

ノート：

  • おそらく、クリックされた後に送信ボタンを無効にする必要があります（失敗した場合は再度有効にします。そうしないと、AJAXに時間がかかる場合、ユーザーがコールバックの前にフィールド値を変更する可能性があり、チェックなしで不正なデータが送信される可能性があります） .
  • これに対する他の解決策は、チェックを行うことonsubmitです。 現在、ユーザーが Enter キーを押した場合、チェックは呼び出されません。これは悪いです！
于 2012-12-06T18:31:45.443 に答える
-1

私が従うかどうかわからないのですが、検証する場合に関数がtrueまたはfalseを返すようにしますか？

編集：私のコードはがらくたでした、それを指摘してくれてありがとうロースト。

したがって、ajax呼び出しを実行しているときに、同じ関数で有効（trueまたはfalse）であるかどうかを実際に取得することはできないため、おそらく別のことを行う必要があります。

いくつかのアイデア。-DOMを使用します（「無効な」クラスなどをフォームフィールドに追加してから、その値を確認します。

-検証の結果を保存するグローバル変数「valid_user」を使用します...（グローバル変数がうまくいかないことは知っていますが、これは悪い習慣ですが、期限がある場合は...）

次に、穴のフォームを検証するときに、username_checkを再度呼び出すのではなく、このことを確認します。

お役に立てれば！

于 2012-12-06T18:11:03.293 に答える