0

I have been trying to use Messi.js to return a pop up box if the user has an input error in a form. I have a php file called add email:

<?php
/ini_set('display_errors',1);
//ini_set('display_startup_errors',1);
//error_reporting(-1);

include('connectionFile.php');   
//test for duplicate emails
$query="SELECT * FROM ClientEmail WHERE ClientEmailAddress = '" . $_POST['emailAdd'] . "'";
$email=$_POST['emailAdd'];
$result=mysql_query($query);
$num=mysql_num_rows($result);

if($num==0)
{
if(isset($_POST['emailAdd']) && $_POST['emailAdd'] != "<<please enter email>>" && $_POST['emailAdd'] !="")
{
// the form was submitted
//remove hacker HTML
$email=strip_tags($_POST['emailAdd']);

//Insert data into database
$sql2="INSERT INTO ClientEmail SET ClientEmailAddress='$email'";
$result=mysql_query($sql2);

}
else
{
print '<script type="text/javascript">'; 
print 'new Messi("Please enter a valid email.", {title: "Input error", modal:true});'; 
print '</script>';

}
}
else
{

print '<script type="text/javascript">'; 
print 'new Messi("Sorry, you have entered an existing email.", {title: "Duplicate Email", modal:true});'; 
print '</script>';
}
?>

I am not sure where to call the jQuery files and css. I have done so in my index.php page(where the addEmail function is called) but it is still not working.

html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Club Blaque - Sign up for the Revolution</title>
    <link href="css/reset.css" rel="stylesheet" type="text/css">
    <link href="css/main.css" rel="stylesheet" type="text/css">
        <link href="css/messi.min.css" rel="stylesheet" type="text/css"/>
        <link href="js/jquery-1.8.2.js"  type="text/javascript"/>
        <script src="js/messi.js" type="text/javascript"></script>

Thanks in advance

EDIT

My form section currently looks as follows

   <form name="emailAddr" method="post" action="">
        <p>BE INVITED TO THE REVOLUTION <input id="emailAddress" name="emailAdd" type="text" value="<<please enter email>>" onFocus="clearText(this)" onblur="addText(this)"/>
        <button type="submit" name="submit" value="Submit"><img id="submitImage"src='image/submit.ico'/></button> </p>

    </form>
4

1 回答 1

0

您甚至可以在发布表单之前在 jQuery/javascript 中进行字段验证测试。这样您就可以在不刷新页面的情况下捕获错误。

请注意“提交”按钮是type="button"，而不是type="submit"。提交功能是通过 jQuery 完成的。

请参阅下面的独立、完整的示例。 jsFiddle在这里

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {

                $('#mybutt').click(function() {
                    //Do your field validation testing here, then submit if okay
                    var em = $('#emailAdd').val();
                    var pw = $('#pwordAdd').val();
                    if (em !='' && pw !='' ) {
                        $('#myform').submit();
                    }else{
                        alert('Please complete all fields');
                    }
                });

            }); //END $(document).ready()
        </script>
    </head>
<body>

<form id="myform" action="yourphpprocessor.php" method="POST">
    Email Address:<br />
    <input id="emailAdd" name="emailAdd" type="text" /><br />
    Password:<br />
    <input id="pwordAdd" name="pwordAdd" type="password" /><br />
    <input type="button" id="mybutt" value="Submit It" />
</form>

</body>
</html>

请注意，如果您希望将 javascript/jQuery 存储在外部文件中，代码将如下所示：

<script type="text/javascript" src='myjavascript.js'></script>

该文件myjavascript.js将如下所示：

$(document).ready(function() {

    $('#mybutt').click(function() {
        //Do your field validation testing here, then submit if okay
        var em = $('#emailAdd').val();
        var pw = $('#pwordAdd').val();
        if (em !='' && pw !='' ) {
            $('#myform').submit();
        }else{
            alert('Please complete all fields');
        }
    });

}); //END $(document).ready()

要在字段验证期间查询数据库，请使用 AJAX。它允许您将电子邮件地址发送到 PHP 文件（我们称其为您的 PHP 处理器文件），进行数据库查找并返回响应。响应是您想要构建的任何内容：从简单的 1 或 0 响应，到您将发布到 DIV 的完全格式化的 HTML 响应。在您的情况下，简单的 1 或 0 就可以了。

您必须决定的第一件事是如何触发 AJAX 查找。您可以使用提交按钮，但在我们的示例中，让我们使用 jQueryblur()选择器，因为它在用户离开字段时触发。

$('#emailAdd').blur(function() {
    //Test if this email already exists
    var em = $('#emailAdd').val();
    $.ajax({
        type: "POST",
        url: "myphpprocessor.php",
        data: 'eml='+em+'&anothervar='+summatelse,
        success: function(whatigot) {
            alert(whatigot);
            if (whatigot == 'itexists') {
                alert('This email address already exists. Please choose another.');
                $('#emailAdd').css({'background-color':'yellow','border-color':'red'});
                $('#emailAdd').focus();
            }
        } //END success callback
    }); //END ajax block
}); //END emailAdd.blur

关于 AJAX 的重要说明：接收到的信息的所有处理都必须在success:函数中进行。因此，例如，错误消息必须在那里发生。一旦你开始使用 AJAX（其中 95% 都在这个例子中 - 这不是很困难），这个笔记一定是你的圣经。记住它。

您的 PHP 处理器文件如下所示：

myphpprocessor.php

<?php
    $email = $_POST['eml']; //Note that it is same as the var NAME posted in AJAX
    $summat = $_POST['anothervar'];

    if ($email != '' && $email != '<<please enter email>>') {
        include('connectionFile.php');   
        //test for duplicate emails
        $query="SELECT * FROM `ClientEmail` WHERE `ClientEmailAddress` = '$email'";
        $result=mysql_query($query);
        $num=mysql_num_rows($result);

        if($num > 0) {
            echo 'itexists';
        }else{
            //do nothing
        }
    }
于 2013-07-29T18:47:22.403 回答