HTML input required fields don´t work

Question

I have one small web app for learning purposes, and I realised "required" attribute doesn´t work, and I can´t find why. It happens on many browsers, so I guess it is not a browser problem.

Things I tried:

Check <!DOCTYPE html> tag is included
Semi-closed the input tags (but deleted that since I have read here it could make some browsers to work in a wrong way).
Check no value attribute is included, since it could make the required attribute be useless
Just to test, put the input button out of the enclosing tags
The two forms seem to be properly closed

Links I looked:

And many others

My code:

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

The app is here

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

You can check how, for example, if you include en ampty email, it says things like "E mail already exists for another user" if there is an already created user with an empty email, and it should never be submitted when that happens.

The thing is, when I was developing it, I think required attribute worked... but it stopped working and I don´t know why or when.

score 0 · Answer 1 · 2018-05-06T00:48:54.593

I found part of the solution on this post

html5 required validator not working with input type=button

That's because the required validator is only called on submit

I had this code on another file that was causing the error:

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


    e.preventDefault();

    //some code
}

What I did is to start working on the submit() event of the form, and not on the click() event of the button.

I found on this post, which helped me a lot.

Submit form after calling e.preventDefault()

I discovered it was a better idea to move the e.preventDefault() to the condition were validation is not right, so I could avoid the submit action only in case the condition is not true.

This is the resulting code which seems to be working now:

$(`#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`);
    }


});

HTML input required fields don´t work

1 Answers1