CODEWITHSUNDEEP
phpjavascriptjqueryvalidationif-statement
mongy910
mongy910

Reputation: 497

Validation - if statement not working

I'm trying to use Javascript for a simple form validation. In this case, I have an email text input and I want it to error if the email is not a valid email or the email address is already taken. The valid email part is erroring fine, but the email address is already taken part always passes.

Here is my script code

<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>

My registeremail.php file works on its own and is:

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

The actual text input and div code is 

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

Does anyone know why this is happening? I'm truly perplexed.

Upvotes: 0

Views: 254

Answers (2)

Manse
Manse

Reputation: 38147

The problem is that what you echo in PHP is

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

and what you check for in JavaScript is

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

i.e. they are not the same ...

I suggest you return a 1 (true) or 0 (false) and then output the text using JavaScript .. Something like

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

then your JavaScript would be something like

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

Upvotes: 4

jfriend00
jfriend00

Reputation: 707746

I would suggest you change your javascript logic to check for the lack of a "Good" response rather than checking for a lengthy error message that you may not be copying exactly. Change to this:

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

This will both prevent issues with not matching your error message exactly, but also allow you to modify that error message or create other errors without having to change your error detection code.

Upvotes: 0

Related Questions