HTML 输入必填字段不起作用答案

【问题标题】：HTML input required fields don´t workHTML 输入必填字段不起作用
【发布时间】：2018-05-05 16:28:10
【问题描述】：

我有一个用于学习目的的小型网络应用程序，但我意识到“必需”属性不起作用，我找不到原因。它发生在许多浏览器上，所以我想这不是浏览器的问题。

我尝试过的事情：

检查<!DOCTYPE html>标签是否包含
半关闭输入标签（但删除了，因为我已经阅读了here，它可能会使某些浏览器以错误的方式工作）。
检查没有包含 value 属性，因为它可能使所需的属性无用
只是为了测试，把输入按钮放在封闭标签之外
这两个表单似乎已正确关闭

我查看的链接：

还有很多其他的

我的代码：

index.php

<?php
    session_start();

    require_once('models/UsuarioPDO.php');


?>

<!DOCTYPE html>

<html>


<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="assets/css/form-styles.css">
    <link rel="stylesheet" href="assets/css/styles.css">
    <link rel="stylesheet" href="assets/css/cookies.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">

    <!--jquery always bwfore bootsrap, sine bootsrap need it-->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" defer></script> 

    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css" >
    <script src="/bootstrap/js/bootstrap.min.js" defer></script>

    <script src="controls/registerSubmit.js" defer></script>



<!------ Include the above in your HEAD tag ---------->


</head>

<body>
    <?php  


        /*if there is the two cookies, we start the session with the user 
    who belog the data of that cookie*/


        if(isset($_COOKIE["id_usuario_myreminder"]) &&  isset($_COOKIE["random_number_user_myreminder"]))
            {

                $usuarioAlogear=  usuarioPDO::getUserWhenCookie($_COOKIE["id_usuario_myreminder"],$_COOKIE["random_number_user_myreminder"]);


                $_SESSION["usuario"]=$usuarioAlogear;
            }


        /*if there is user logged in, back to  main*/

        if(isset($_SESSION["usuario"]))
        {
            header('Location:views/main.php');
            exit;

        }else
        {/*if there is not logged user, show index components*/


            /*is comes from registerUser.php but was not possible to insert the user due to repeated email,
            we send a session variables here to make this page show a flag, then we destroy the session
            to ensure it won´t appear again*/

            if( (isset($_SESSION["mailrepetido"]))&&($_SESSION["mailrepetido"])==true )
            {

?>  
                <div class="alert alert-danger" role="alert">
                    E Mail already exists for another user
                </div>
<?php

                session_destroy();
            }

            /*if login attempt was wrong, another flag*/

            if( isset($_SESSION["wrongLogIn"]) )
            {
                if($_SESSION["wrongLogIn"]==true)
                {

?>
                    <div class="alert alert-danger" role="alert">
                        wrong login
                    </div>


<?php
                    session_destroy();


                }
            }

            /*if session is closed*/

            if( isset($_SESSION["closedSession"]) )
            {
                if($_SESSION["closedSession"]==true)
                {
?>
                    <div class="alert alert-info">
                         Closed Session
                    </div>

<?php
                    session_destroy();

                }

            }

?>

            <?php include("views/view_login_register_forms.php"); ?>


            <br><br>

            <?php include("views/view_footer.php"); ?>
<?php
        }/* end else*/


        include('views/view_cookies-banner.php');

?>
</body>

</html>

view_login_register_forms.php

<div class="container">
    <div class="card bg-light">
    <article class="card-body mx-auto" style="max-width: 400px;">
        <h4 class="card-title mt-3 text-center">MY REMINDER</h4>
        <img src="assets/imagenes/bombilla.svg" class="img-responsive" alt="man_and_bulb"> 
        <p class="divider-text">
            <span class="bg-light">LOG IN </span>
        </p>

        <?php /* remember action path will be called from index*/ ?>

        <form id="formLogIn" method="post" action="controls/loginUser.php">

            <div class="form-group input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text"> <i class="fa fa-envelope"></i> </span>
                </div>
                <input name="email-Input-Name" class="form-control" placeholder="Email address" type="email" required>
            </div> <!-- form-group// -->



            <div class="form-group input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text"> <i class="fa fa-lock"></i> </span>
                </div>
                <input name="password-Input-Name" class="form-control" placeholder="Enter password" type="password" required>
            </div> <!-- form-group// -->

             <!--remember me checkbox-->
            <div class="form-group input-group">

               <input name="remember-Input-Name" id="id_remember_checkbox" type="checkbox" value="remember"> <label for="id_remember_checkbox" id="id_label_remember">Remember me</label>
            </div> <!-- form-group// -->


            <p>
                <button type="submit" class="btn btn-primary" id="loginButton">Log in to your reminder</button>
            </p>

        </form>



        <p class="divider-text">

            <span class="bg-light">OR REGISTER</span>

        </p>

        <?php /* remember action path will be called from index*/ ?>
        <form id="formRegister" method="post" action="controls/loginUser.php">
            <div class="form-group input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text"> <i class="fa fa-user"></i> </span>
                </div>
                <input name="newUserName" class="form-control" placeholder="Name (required)" type="text" required>
            </div> <!-- form-group// -->
            <div class="form-group input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text"> <i class="fa fa-envelope"></i> </span>
                </div>
                <input name="email-Input-Name" id="id_email-Input-Name" class="form-control" placeholder="Email address (required)" type="email" required>
            </div> <!-- form-group// -->




            <label for="password-Input-Name">Password must be between 8-20 characters</label>                                     


            <div class="form-group input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text"> <i class="fa fa-lock"></i> </span>
                </div>

                <input name= "password-Input-Name" id="id_password-Input-Name" maxlength="20" class="form-control" placeholder="Password (required)" type="password" required>
            </div> <!-- form-group// -->

            <div class="form-group input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text"> <i class="fa fa-lock"></i> </span>
                </div>
                <input name="newUserPassRepeat" id="id_newUserPassRepeat"  maxlength="20" class="form-control" placeholder="Repeat password (required)" type="password" required>
            </div> <!-- form-group// --> 

            <input name="registerUserInputName" type="hidden" value="true">

            <div class="form-group">
                <button type="submit" class="btn btn-primary btn-block" id="registerButton"> Create Account  </button>
            </div> <!-- form-group// -->      

        </form>
    </article>
    </div> <!-- card.// -->

</div> 
<!--container end.//-->

应用在这里

https://myreminder.avanzartewebs.com/index.php

您可以检查，例如，如果您包含 en ampty email，它会说“电子邮件已为另一个用户存在”之类的内容，如果已经创建了一个带有空电子邮件的用户，并且它不应该在以下情况下提交发生这种情况。

问题是，当我开发它时，我认为 required 属性有效......但它停止了工作，我不知道为什么或何时。

【问题讨论】：

标签： html required

【解决方案1】：

我在这篇文章中找到了部分解决方案

html5 required validator not working with input type=button

这是因为所需的验证器仅在提交时调用

我在另一个导致错误的文件中有此代码：

$("#registerButton").click(function(e){


    e.preventDefault();

    //some code
}

我所做的是开始处理表单的submit() 事件，而不是按钮的click() 事件。

我在这个帖子上找到的，对我帮助很大。

Submit form after calling e.preventDefault()

我发现将e.preventDefault() 移动到验证不正确的条件是一个更好的主意，因此我可以仅在条件不正确的情况下避免提交操作。

这是现在似乎可以工作的结果代码：

$(`#formRegister`).submit(function(e){

     //e.preventDefault(); NOT HERE



    let newPass=$(`#id_password-Input-Name`).val();
    let repeatPass=$(`#id_newUserPassRepeat`).val();

    let tamanioNewPass=newPass.length;
    let tamanioRepeatPass=repeatPass.length;

    /*if passwords are the same, and have minimun 8 characters, ok (16 characters maximum is controlled with html)*/

    /*it is only neccesary to test if one of them is >= 8 , because if they are the same and one of them is >=8, the other is equal valid too*/ 

    if((newPass===repeatPass) && (tamanioNewPass>=8) )
    {

        $(`#formRegister`).submit();
    }

    else
    {
         e.preventDefault(); //if pass is wrong, don´t submit!
         alert(`could not be possible to do registration submit`);
    }


});

【讨论】：