CODEWITHSUNDEEP
phpjquerymysqlvalidation
Thijs Becker
Thijs Becker

Reputation: 1

Form validation to see if the email already excists in the MySQL database

At the moment I have a form (PHP & jQuery) with validations. I want to add a validation to check if the email address of a new user is already in the MySQL database or not.

At the moment there are 3 (IF) validations already for the name and email in jQuery:

function validate() {
var output = true;
$(".signup-error").html('');
if($("#personal-field").css('display') != 'none') {
    if(!($("#name").val())) {
        output = false;
        $("#name-error").html("Name required!");
    }
    if(!($("#email").val())) {
        output = false;
        $("#email-error").html("Email required!");
    }   
    if(!$("#email").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {
        $("#email-error").html("Invalid Email!");
        output = false;
    }

I would like to have a 4th one to check if the email address is already in the MySQL database.

The complete PHP file with jQuery:

<?php
    include 'db_connection.php';    
    if(isset($_POST['finish'])){
        $name   = '"'.$dbConnection->real_escape_string($_POST['name']).'"';
        $email      = '"'.$dbConnection->real_escape_string($_POST['email']).'"';
        $password   = '"'.password_hash($dbConnection->real_escape_string($_POST['password']), PASSWORD_DEFAULT).'"';
        $gender     = '"'.$dbConnection->real_escape_string($_POST['gender']).'"';

        $sqlInsertUser = $dbConnection->query("INSERT INTO users (name, password, email, gender) VALUES($name, $password, $email, $gender)");
    }
?>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title></title>

<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/960.css" />
<link rel="stylesheet" href="css/demo.css" />

<script src="scripts/jquery-1.10.2.js"></script>

<style>

CSS CODE

</style>

<script>
function validate() {
var output = true;
$(".signup-error").html('');
if($("#personal-field").css('display') != 'none') {
    if(!($("#name").val())) {
        output = false;
        $("#name-error").html("Name required!");
    }
    if(!($("#email").val())) {
        output = false;
        $("#email-error").html("Email required!");
    }   
    if(!$("#email").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {
        $("#email-error").html("Invalid Email!");
        output = false;
    }
}
if($("#password-field").css('display') != 'none') {
    if(!($("#user-password").val())) {
        output = false;
        $("#password-error").html("Password required!");
    }   
    if(!($("#confirm-password").val())) {
        output = false;
        $("#confirm-password-error").html("Confirm password required!");
    }   
    if($("#user-password").val() != $("#confirm-password").val()) {
        output = false;
        $("#confirm-password-error").html("Password not matched!");
    }
}
return output;
}
$(document).ready(function() {
    $("#next").click(function(){
        var output = validate();
        if(output) {
            var current = $(".active");
            var next = $(".active").next("li");
            if(next.length>0) {
                $("#"+current.attr("id")+"-field").hide();
                $("#"+next.attr("id")+"-field").show();
                $("#back").show();
                $("#finish").hide();
                $(".active").removeClass("active");
                next.addClass("active");
                if($(".active").attr("id") == $("li").last().attr("id")) {
                    $("#next").hide();
                    $("#finish").show();                
                }
            }
        }
    });
    $("#back").click(function(){ 
        var current = $(".active");
        var prev = $(".active").prev("li");
        if(prev.length>0) {
            $("#"+current.attr("id")+"-field").hide();
            $("#"+prev.attr("id")+"-field").show();
            $("#next").show();
            $("#finish").hide();
            $(".active").removeClass("active");
            prev.addClass("active");
            if($(".active").attr("id") == $("li").first().attr("id")) {
                $("#back").hide();          
            }
        }
    });
});
</script>

</head>

<body>

<div class="container_12">

    <div class="grid_8">
    <p>
    TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT
    </p>
    </div>

<div class="grid_4">

<p>Register new FC Magnate</p>

<div class="message"><?php if(isset($message)) echo $message; ?></div>

<ul id="signup-step">
    <li id="personal" class="active">Personal Detail</li>
    <li id="password">Password</li>
    <li id="general">General</li>
</ul>

<form name="frmRegistration" id="signup-form" method="post">
<div id="personal-field">
    <label>Name</label><span id="name-error" class="signup-error"></span>
    <div><input type="text" name="name" id="name" class="demoInputBox"/></div>
    <label>Email</label><span id="email-error" class="signup-error"></span>
    <div><input type="text" name="email" id="email" class="demoInputBox" /></div>
</div>
<div id="password-field" style="display:none;">
    <label>Enter Password</label><span id="password-error" class="signup-error"></span>
    <div><input type="password" name="password" id="user-password" class="demoInputBox" /></div>
    <label>Re-enter Password</label><span id="confirm-password-error" class="signup-error"></span>
    <div><input type="password" name="confirm-password" id="confirm-password" class="demoInputBox" /></div>
</div>
<div id="general-field" style="display:none;">

    <label>Gender</label>
    <div>
    <select name="gender" id="gender" class="demoInputBox">
    <option value="female">Female</option>
    <option value="male">Male</option>
    </select></div>
</div>
<div>
    <input class="btnAction" type="button" name="back" id="back" value="Back" style="display:none;">
    <input class="btnAction" type="button" name="next" id="next" value="Next" >
    <input class="btnAction" type="submit" name="finish" id="finish" value="Finish" style="display:none;">
</div>
</form>

</div>

The "db_connection.php" file:

<?php
    define('_HOST_NAME', 'localhost');
    define('_DATABASE_USER_NAME', 'root');
    define('_DATABASE_PASSWORD', '****');
    define('_DATABASE_NAME', '****');

    $dbConnection = new mysqli(_HOST_NAME, _DATABASE_USER_NAME, _DATABASE_PASSWORD, _DATABASE_NAME);
    if ($dbConnection->connect_error) {
        trigger_error('Connection Failed: '  . $dbConnection->connect_error, E_USER_ERROR);
     }

?>

I tried to create this validation from other examples that were given here on the website. But, no success. Please, it would be great if somebody could help me a little further.

UPDATE: With the help of Suyog I changed the files. But, it doesn't seem to work yet. Here are the files that I use at the moment: fcmagnate.com/files.zip

The form works till the moment the validation of the email address in the database starts, than it stops.

Upvotes: 0

Views: 803

Answers (2)

Suyog
Suyog

Reputation: 2482

You will have to make use of JQuery AJAX for this. Write a function in AJAX to send email to php gage where we will check the existance of email.

<script>
function checkEmail(eMail)
{
    $.ajax({ 
        url: 'check_email.php',
        data: {emailId: eMail},
        type: 'post',
        success: function (data) { 
            if(data == '1')
                return false;
            else
                return true;
        }
    });
}
</script>

Then you can call this function 

<script>
function validate() 
{
    var output = true;
    $(".signup-error").html('');
    if($("#personal-field").css('display') != 'none') 
    {
        if(!($("#name").val())) 
        {
            output = false;
            $("#name-error").html("Name required!");
        }
        if(!($("#email").val())) 
        {
            output = false;
            $("#email-error").html("Email required!");
        }   
        if(!$("#email").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) 
        {
            $("#email-error").html("Invalid Email!");
            output = false;
        }
        if(!checkEmail($("#email").val()))
        {
            $("#email-error").html("Email already exist!");
            output = false;
        }
    }
}
</script>

Youe check_email.php file will contain the code as follows

<?php
    include 'db_connection.php';    
    if(isset($_POST['emailId']))
    {

        $email = '"'.$dbConnection->real_escape_string($_POST['emailId']).'"';

        $sqlCheckEmail = $dbConnection->query("SELECT user_id FROM users WHERE LOWER(email) like LOWER('%".$email."%')");

        if($sqlCheckEmail->num_rows == 1)
            echo '1';
        else
            echo '0';
    }
?>

Upvotes: 1

Horrible Programmer
Horrible Programmer

Reputation: 105

Use Ajax jQuery.ajax on client side to communicate with server side reusing your php code mentioned.

Upvotes: 0

Related Questions