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:
<!DOCTYPE html> tag is included我看过的链接：
还有很多其他人
我的代码：
的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电子邮件，如果已经创建了一个空电子邮件的用户，则会显示“E mail已经存在给另一个用户”等内容，并且永远不应该提交发生了。
问题是，当我开发它时，我认为必需属性有效...但它停止工作，我不知道为什么或何时。
答案 0 :(得分：0)
我在这篇文章中找到了部分解决方案
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`);
}
});