Question

如果用户在表单中输入错误，我一直在尝试使用Messi.js返回弹出框。我有一个名为add email的php文件：

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

我不知道在哪里调用jQuery文件和css。我已经在我的index.php页面中调用了addEmail函数，但它仍然无效。

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>

提前致谢

修改

我的表单部分目前看起来如下

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

Answer 1

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

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

请参阅下面的独立，完整的工作示例。 jsFiddle here

<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响应，到完全格式化的HTML响应，您将发布到DIV中。在你的情况下，一个简单的1或0就可以了。

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

$('#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
        }
    }

从php File调用外部jQuery函数

1 个答案: