使用php提交表单，通过javascript进行电子邮件检查

Question

First time poster, long time reader, so I'll get right to the point.

I'm working on a project for school and this question kind of goes way beyond the requirements of the project, but it'll look awesome once it's finished. I've got 3 pieces of code that aren't cooperating--a piece of html/php, a piece of php, and javascript.

The ultimate goal of my code is this: Here's a form, submit your email and IF it's a @trnty.edu address (my school), submit the form. The problem currently is that the form submits blank data--proof being the many empty lines on my sql server.

I've tested manually setting variables, and it does work (via the emailsubmit.php code), the emailcheck.js code does check for a proper email, but they don't talk to each other properly.

Ya'll mind giving me a hand? I've been at this for about 3 weeks searching this (and other) websites via Google for possible solutions. Many thanks! (my form code from the homepage)

    <div id="signupform">
    <form id="signup" action="scripts/emailsubmit.php" method="POST">
        <input type="email" name="email" placeholder="school email address" />
            <button id="sub">Submit</button>
    </form>

My current Javascript -- I'm not sure what or how to fill in the blank...

$(function(){
$('#signup').submit(function() 
    {
        if(validateEmail($('input').val()))
            {
                return true;
            }
        else
        {
                return false;
        }
});

    function validateEmail(email)
    {
    var re = /^\s*[\w\-\+_]+(\.[\w\-\+_]+)*\@[\w\-\+_]+\.[\w\-\+_]+(\.[\w\-\+_]+)*\s*$/;
    if (re.test(email)) 
        {
            if (email.indexOf('@trnty.edu', email.length - '@trnty.edu'.length) !== -1) 
                {
                    //alert('Submission was successful.'); //if true, submit form -- see video
                    return true;
                }
                 else 
                    {
                        alert('Email must be a Trinity email address ([e-mail]).');
                       return false;
                    }
        } 
        else {alert('Not a valid e-mail address.');}
    }


    });

Myphp code.

    <?php
    $dbhost = 'localhost';
    $dbuser = 'service';
    $dbpass = '!@#$%';
    $db = 'tbv_main';
    $con = mysqli_connect($dbhost,$dbuser,$dbpass,$db);

    //$email = $_POST['email'];
    //$email = '[e-mail]';
    $sql = "INSERT INTO stage1 (email, counter) VALUES ('$email', NULL)";

    if (!mysqli_query($con,$sql))
        {
            die('Error: ' . mysqli_error($con));
        }
    echo "Email: $email , 1 record added";
    ?>

Answer 1

your jQuery .submit() is cancelling the default form submission with return false; but there's no ajax to send the data to the server, so what you actually want to do is return false after the negative alerts, and return true at when your regexp passes, then check it in your submit function.

$('#signup').submit(function() {
    if(validateEmail($('input').val())){
        return true;
    }else{
        return false;
    }
});

Then in your validate function.

var re = /^\s*[\w\-\+_]+(\.[\w\-\+_]+)*\@[\w\-\+_]+\.[\w\-\+_]+(\.[\w\-\+_]+)*\s*$/;
if (re.test(email)) {
    if (email.indexOf('@trnty.edu', email.length - '@trnty.edu'.length) !== -1) 
        {
            //alert('Submission was successful.'); //if true, submit form -- see video
            return true;
        }
     else {
        alert('Email must be a Trinity email address ([e-mail]).');
        return false;
    }
} else {
    alert('Not a valid e-mail address.');
    return false;
}
return false;

In doing so, your form will submit when the regexp is properly validated and the page will refresh causing your php code to fire.