2013-01-03 44 views
0

我正在嘗試使用Javascript進行簡單的表單驗證。在這種情況下,我有一個電子郵件文本輸入,如果電子郵件不是有效的電子郵件地址或電子郵件地址已被佔用,我想讓它出錯。有效的電子郵件部分是錯誤的,但電子郵件地址已被佔用部分總是通過。驗證 - 如果聲明不起作用

這裏是我的腳本代碼

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script> 
function valemail() 
{ 
var email = $('input#email').val(); 
var atpos=email.indexOf("@"); 
var dotpos=email.lastIndexOf("."); 
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) 
    { 
    document.getElementById("email").style.border="3px solid red"; 
    document.getElementById('email_error').style.display = 'block'; 
    document.getElementById('email_error').innerHTML = 'A valid email address is required'; 
    } else { 
if ($.trim(email) != '') 
{ 

    $.post('../ajax/registeremail.php', {email: email}, function(data) 
    { 
     if ($.trim(data) == 'That email address is already in use. If you have created an account, 
<a href="../login.php">Login</a>') 
     { 
      document.getElementById("email").style.border="3px solid red"; 
      document.getElementById('email_error').style.display = 'block'; 
      $('div#email_error').text(data); 
     } else { 
      document.getElementById("email").style.border="3px solid #33FF33"; 
      document.getElementById('email_error').style.display = 'none'; 
     } 
    }); 
    } 
}} 
</script> 

我registeremail.php文件適用於自己的並且是:

<?php 
include('../init.php'); 
//email validation 
if (isset($_POST['email']) === true && empty($_POST['email']) === false) { 
$email = $_POST['email']; 

if (email_exists($email) === true) { 
echo('That email address is already in use. If you have created an account, <a>Login</a>'); 
} else { 
echo('Good'); 
} 
?> 

實際的文字輸入和DIV代碼

 <input class="input" type="text" tabindex="2" placeholder="Email*" style="height:20px;" name="email" 
id="email" onchange="valemail()"> 
<div id="email_error"></div> 

做有誰知道爲什麼會發生這種情況?我真的很困惑。

+0

打開控制檯,找出是否有任何錯誤。 – Prasanth

+0

爲什麼不使用jQuery真實?看起來像一個奇怪的混合香草JS和jQ ... – elclanrs

+0

比較一個變量對字符串文字(特別是那麼長)可能會流淚。在這些情況下使用布爾或int類型。 –

回答

4

的問題是,你在PHP呼應的是

That email address is already in use. If you have created an account, <a>Login</a> 

,你檢查什麼在JavaScript是

That email address is already in use. If you have created an account, <a href="../login.php">Login</a> 

即它們是不一樣的......

我建議您返回一個1(true)或0(false),然後使用JavaScript輸出文本。類似於

if (email_exists($email) === true) { 
    echo('0'); 
} else { 
    echo('1'); 
} 

那麼你的JavaScript將類似於

if ($.trim(data) == '0') { 
    document.getElementById("email").style.border = "3px solid red"; 
    document.getElementById('email_error').style.display = 'block'; 
    $('div#email_error').text('That email address is already in use. If you have created an account,<a href="../login.php">Login</a>'); 
} else { 
    document.getElementById("email").style.border = "3px solid #33FF33"; 
    document.getElementById('email_error').style.display = 'none'; 
} 
+0

哎呀對不起ManseUK,不知道你是張貼相同的解決方案,否則我wouldnt提交 –

+0

@HankyPanky只是刪除你的和upvote我的然後:-) – ManseUK

+1

好吧,只是做到了:) –

0

我建議你改變你的JavaScript邏輯來檢查缺乏一個「好」的迴應,而不是檢查冗長的錯誤消息,您可能不能完全抄襲。改成這樣:

$.post('../ajax/registeremail.php', {email: email}, function(data) 
{ 
    if ($.trim(data) != 'Good') 
    { 
     ... 

這將既防止問題與不完全匹配您的錯誤信息,而且還允許你修改錯誤信息或不改變你的錯誤檢測代碼創建其他錯誤。