Question

我的页面中有一个登录表单，我想测试用户是否填写了所有输入，这是我尝试的代码，但它不起作用：

<?php session_start() ?>
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript">

            var check {};

            check['login'] = function () {

                var login = document.getElementById('login');
                if(login.value.length > 0)
                {
                    return true;
                }
                else
                {
                    return false;
                }

            };

            check['mdp'] = function () {

                var mdp = document.getElementById('mdp');
                if(login.value.length > 0)
                {
                    return true;
                }
                else
                {
                    return false;
                }

            };

            var inputs = document.getElementsByTagName('input');

            for(var i=0; i<inputs.length; i++)
            {
                inputs[i].onkeyup = function() {
                    check[this.id](this.id);
                }
            }

            var result = true;

            for (var i in check)
            {
                result = check[i](i) && result;
            }

            var myForm = document.getElementById('form1');

            if (!result)
            {
                alert('Vueillez saisir tous les champs !');
            }

            myForm.addEventListener('valider', function (e) {
                if (!result) {
                    e.preventDefault();

                }
            });

        </script>
    </head>
    <body>
        <?php

            require_once('bdd.inc.php');




            if (isset($_POST['valider'])) {

                $auth = false;

                foreach($clients as $client)
                {
                    if($_POST['login'] == $client['Pseudo'] && $_POST['mdp'] == $client['MotDePasse'])
                    {
                        $_SESSION['login'] = $_POST['login'];
                        $_SESSION['mdp'] = $_POST['mdp'];
                        $auth = true;
                        break;
                    }
                }

                if(!$auth)
                {
                    header('location:authentification.php?auth=false');
                }
            }

        ?>
        <form method="post" action="authentification.php" id="form1" name="form1">
            <table>
                <tr>
                    <td>Login :</td>
                    <td><input type="text" name="login" id="login"></td>
                </tr>
                <tr>
                    <td>Mot de passe :</td>
                    <td><input type="text" name="mdp" id="mdp"></td>
                </tr>
                <tr><td colspan="2" align="center"><input type="submit" value="Valider" name="valider" id="valider"></td></tr>
                <?php
                    if(isset($_GET['auth']))
                    {
                        if($_GET['auth'] == 'false')
                        {
                            echo '<div style="color:red">Désolé, Votre pseudo ou votre mot de passe est erroné !</div>';
                        }
                    }
                ?>
            </table>
        </form>
    </body>
</html>

问题是，当我点击提交按钮时，它会将我重定向到操作页面，尽管输入未填充

Answer 1

问题是，在JavaScript scripe完成执行之前，浏览器将提交一个带type="submit"的按钮。您要做的是让您的脚本在验证后提交您的表单。因此，将输入类型更改为按钮，并从javascript本身进行提交。

编辑:(每条评论）

您已经通过JavaScript提交表单了。为了使代码工作，我只需将输入按钮从提交类型更改为按钮即可。所以将<input type="submit" value="Valider" name="valider" id="valider">更改为：

<input type="button" value="Valider" name="valider" id="valider">

Answer 2

你可以尝试一下

<?php 
session_start();
require_once('bdd.inc.php');
if (isset($_POST['valider'])) {

    $auth = false;

    foreach($clients as $client)
    {
        if($_POST['login'] == $client['Pseudo'] && $_POST['mdp'] == $client['MotDePasse'])
        {
            $_SESSION['login'] = $_POST['login'];
            $_SESSION['mdp'] = $_POST['mdp'];
            $auth = true;
            break;
        }
    }

    if(!$auth)
    {
        header('location:authentification.php?auth=false');
    }
}
?>
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript">
            function validation(form)
            {
                var login = document.getElementById('login');
                var mdp = document.getElementById('mdp');
                if(login.value == '' || mdp.value == '')
                    alert('You must fill in all fields!');
                else
                    form.submit();

                return false;
            }
        </script>
    </head>
    <body>

        <form method="post" action="authentification.php" id="form1" name="form1" onsubmit="validation(this);return false">
            <table>
                <tr>
                    <td>Login :</td>
                    <td><input type="text" name="login" id="login"></td>
                </tr>
                <tr>
                    <td>Mot de passe :</td>
                    <td><input type="text" name="mdp" id="mdp"></td>
                </tr>
                <tr><td colspan="2" align="center"><input type="submit" value="Valider" name="valider" id="valider"></td></tr>
                <?php
                    if(isset($_GET['auth']))
                    {
                        if($_GET['auth'] == 'false')
                        {
                            echo '<div style="color:red">Désolé, Votre pseudo ou votre mot de passe est erroné !</div>';
                        }
                    }
                ?>
            </table>
        </form>
    </body>
</html>

测试用户是否填写了表单中的所有输入

2 个答案: