0

The logic i am trying to do is:

input field starts white (Normal);
after somebody finish typing, if the email does not exists, the input gets light red;
if the email exists in the database, the input becomes white again;

I have my code like this:

index.php

<?php
include 'my database connection page';
include 'page that return me an array with all the emails';
?>
<form method="POST">
    <input type="text" name="email" id="email_field" onFocus="changeColorEmail(this)">
    <input type="submit">
</form>

scripts.js

function changeColorEmail(which) {
    which.value = which.value.split(' ').join('')
        if (which.value == "<? echo $user_data['user_email'] ?>") {
            which.style.background = '#ffffff';
    }else {
            which.style.background = "#ffebe8";
    }
}

Any ideas are appreciated!

user.php (contain a function that verify if the email exists in database)

function email_exists($email){
    return (mysql_result(mysql_query("SELECT COUNT(user_id) FROM user WHERE user_email = '$email'"), 0) == 1) ? true : false;
}
4

3 に答える 3

3

わかりました、これを行う2つの方法：

難しい方法： onblurイベントをキャプチャする必要があります-メールボックスを離れると発生します。また、その値をスクリプトに返送して有効かどうかをテストするために、少しAJAXが必要になります。いいえ。

jQuery：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"/>
<script>

function ValidateEmail(email)
{
   var url = 'validateemail.php?email=' + email;

   $.getJSON( url, function(data) {

       var result = jQuery.parseJSON(data);
       var ctrl = $("#email_field");

       if(result.isValid == "true") {
           ctrl.addClass("valid").removeClass("inValid");
       }
       else {
           ctrl.addClass("inValid").removeClass("valid");
       }
   });
}

$(document).ready(function() {

     // change blur to keyup if you want it to validate as they type (bad idea)
     $("#email_field").bind("blur", function(){
         ValidateEmail($(this).val());
     });
});

</script>

（テストされていませんが、一般的なアイデアが得られるはずです）

サーバーにvalidateemail.phpというスクリプトが必要です。このスクリプトは、電子メールパラメータを取得して、次のいずれかを返す必要があります。

{"isValid": "true"} or {"isValid": "false"}

メールの価値によって異なります。

簡単な方法： ページに2つのcssクラス（validとinValid）を追加します-ページが送信されたときに、電子メールが存在する場合、代わりに無効なクラスを追加しない場合は、有効なクラスを入力コントロールに追加します。

CSS：

.valid { color: #ffffff; }
.invalid { color: #ffebe8; }

PHP：

<input type="text" 
    name="email" 
    id="email_field" 
    onFocus="changeColorEmail(this)"
    <?echo 'class="'.(email_exists($_GET['email']) ? 'valid': 'inValid').'"';?>
>

最初に2番目のものを試してください

更新：バグ修正

于 2012-05-16T19:46:30.423 に答える
2

ユーザーが入力している間に電子メール アドレスを検証する必要があるように見えるため、 に変更onFocusする必要があります。onkeyup

インタラクション設計の観点から、最終入力が無効な場合にのみ色を赤に変更し、検証プロセスのタイミングを変更することをお勧めします。

赤は確かに「間違っている」と簡単に関連付けられますが、フィールドにフォーカスを与えることが既に間違っていると見なされている場合、ユーザーを混乱させる可能性があります。onblurイベントが発生したとき、つまりユーザーが明らかに入力を完了したとき、および/またはユーザーがまだフォーカスを持っているが一定時間キーを押していないときに、検証を開始することをお勧めします。

もし私がユーザーだったら、それは私が最も快適に感じる行動であり、「無効な電子メールアドレスを入力しました」と直接解釈する行動でもあります.

于 2012-05-16T19:53:18.097 に答える
1

まず、あなたのユースケースには使いやすさの問題があるようです。通常、フィールドは、フォーカスを失うまで検証結果を示しません。このようにして、ユーザーがデータの入力を完了していないときに、検証エラーでユーザーを中断することはありません。

非同期検証を実現する方法については、XMLHttpRequest を使用します (たとえば、jQuery の を使用します$.ajax())。

あなたのユースケースでは、入力は電子メールアドレスがすでに存在する場合にのみ有効です。その場合、email_exists.php単にテキストをエコーするか、渡された電子メールが存在するかどうかに応じてtrue、別の PHP ページ (例: ) を作成できます。false

例:
リクエスト:http://example.com/email_exists.php?email=me@awesome.com
レスポンス:trueまたはfalseそのまま。

最後に、「onChange」または「onBlur」イベント リスナーを入力に登録します。起動したら$.ajax()、上記のように PHP ページにメール アドレスを送信し、応答を確認します。次に、応答に基づいてクラスを追加/削除して、入力要素に目的の外観を与えることができます。

于 2012-05-16T20:03:43.250 に答える