Ввод HTML обязательные поля не работают - PullRequest
Новая
       12

Ввод HTML обязательные поля не работают

0 голосов
/ 05 мая 2018

У меня есть одно маленькое веб-приложение для учебных целей, и я понял, что атрибут «обязательный» не работает, и я не могу найти почему. Это происходит во многих браузерах, поэтому я думаю, что это не проблема браузера.

То, что я пробовал:

  • Проверка <!DOCTYPE html> тег включен
  • Полузакрытые входные теги (но удалили, так как я прочитал здесь , это может заставить некоторые браузеры работать неправильно).
  • Проверьте, не включен ли атрибут значения, поскольку он может сделать обязательный атрибут бесполезным
  • Просто чтобы проверить, поместите кнопку ввода из тегов
  • Кажется, что две формы правильно закрыты

Ссылки, которые я посмотрел:

и многие другие

Мой код:

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

Вы можете проверить, как, например, если вы включаете полное письмо, оно говорит что-то вроде «Электронная почта уже существует для другого пользователя», если уже есть созданный пользователь с пустым письмом, и его никогда не следует отправлять, когда это происходит.

Дело в том, что когда я его разрабатывал, я думаю, что требуемый атрибут работал ... но он перестал работать, и я не знаю, почему и когда.

1 Ответ

0 голосов
/ 05 мая 2018

Я нашел часть решения в этом посте

html5 обязательный валидатор не работает с типом ввода = кнопка

Это потому, что требуемый валидатор вызывается только при отправке

У меня был этот код в другом файле, который вызывал ошибку: 

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


    e.preventDefault();

    //some code
}

Я начал работать с событием submit() формы, а не с событием click() кнопки.

Я нашел в этом посте, который мне очень помог.

Отправить форму после вызова 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`);
    }


});
...