javascript - 表单验证未显示错误消息
问题描述
我正在尝试进行表单验证,但错误消息根本不会显示。
我相信错误出在 CSS 部分,但我不是这两种技术的专家。
const form = document.getElementById("form");
const nombre = document.getElementById("nombre");
const address = document.getElementById("direccion");
const codigoPostal = document.getElementById("cp");
const telefono = document.getElementById("tel");
const pais = document.getElementById("pais");
form.addEventListener('submit', e => {
e.preventDefault();
checkInputs();
});
function checkInputs()
{
const nameValue = nombre.value.trim();
const addressValue = address.value.trim();
const codigoPostalValue = codigoPostal.value.trim();
const telefonoValue = telefono.value.trim();
const paisValue = pais.value.trim();
if(nameValue === '')
{
setErrorFor(nombre, 'Se debe poner un nombre');
}
else
{
setSuccessFor(nombre);
}
}
function setErrorFor(input, message)
{
const formControl = input.parentElement;
const small = formControl.querySelector('small');
formControl.className = 'form-control error';
small.innerText = message;
}
function setSuccessFor(input)
{
const formControl = input.parentElement;
formControl.className = 'form-control success';
}
html
{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@font-face {
font-family: 'fast_handregular';
src: url('font/fasthand-lgbmv-webfont.woff2') format('woff2'),
url('font/fasthand-lgbmv-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body
{
background-color: black; /* For browsers that do not support gradients */
background-image: linear-gradient(rgb(212, 0, 0), #000000);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.video
{
position: relative;
left: 170px;
overflow: hidden;
text-align: center;
margin-top: 100px;
margin-bottom: 100px;
padding-top: 56.25%;
}
.video-responsive
{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 80%;
height: 80%;
}
body .top
{
margin-bottom: 50px;
text-align: center;
}
body .button
{
background-color: black;
color: white;
border:whitesmoke;
padding: 20px 64px;
text-align: center;
font-family:fast_handregular;
cursor: pointer;
border-style: solid;
border-radius: 16px;
margin-left: 40px;
margin-right: 40px;
}
body .centerButton
{
text-align: center;
background-color: transparent;
}
body .mercancia
{
text-align: center;
margin-right: 30px;
margin-left: 30px;
margin-top: 50px;
margin-bottom: 50px;
}
.precio1 {
color: whitesmoke;
font-family:fast_handregular;
font-size: 24px;
}
.precio2 {
color: whitesmoke;
font-family:fast_handregular;
font-size: 24px;
}
.shirt
{
margin-top: 20px;
}
.shirt img:last-child
{
display: none;
}
.shirt:hover img:first-child
{
display: none;
}
.shirt:hover img:last-child
{
display: inline-block;
}
.merch
{
font-size: 20px;
}
.playlist
{
font-size: 16px;
}
a {
text-decoration: none; /*for blue anchor in bottom right */
margin-left: 10px;
margin-right: 10px;
}
a.button:hover
{
opacity: 2;
}
footer{
text-align: center;
margin-top: 30px;
margin-bottom: 50px;
}
footer .footerContainer
{
padding-bottom: 50px;
}
a:hover{
opacity: 0.7;
}
.button:hover
{
background-color: white;
color: black;
}
.center
{
position: relative;
left: 100px;
}
.container {
background-color: transparent;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
font-family:fast_handregular;
margin-top: 25px;
overflow: hidden;
width: 500px;
max-width: 100%;
align-items: center;
color:white;
}
.form {
padding: 30px 40px;
display: inline-block;
width: 70%;
}
.form-control {
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
font-size: 20px;
}
.form-control label {
display: inline-block;
margin-bottom: 5px;
}
.form-control input {
display: block;
border-radius: 4px;
padding: 10px;
font-size: 14px;
width: 100%;
}
.form-control.success input {
border-color: #2ecc71;
}
.form-control.error input {
border-color: #e74c3c;
}
.form-control small {
visibility: hidden;
position: absolute;
bottom: 0;
left: 0;
}
.form-control.error small {
visibility: visible;
}
.header {
font-family:fast_handregular;
text-align: center;
}
.form button {
background-color: black;
color: white;
border:whitesmoke;
padding: 20px 64px;
text-align: center;
font-family:fast_handregular;
cursor: pointer;
border-style: solid;
border-radius: 16px;
width: 100%;
font-size: 24px;
}
@media (max-width: 700px) {
html {
height:100vh; /* responsive height */
}
body
{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
}
body .button
{
background-color: black;
color: white;
border:whitesmoke;
padding: 20px 64px;
text-align: center;
font-family:fast_handregular;
cursor: pointer;
border-style: solid;
border-radius: 16px;
margin-top: 20px;
margin-bottom: 20px;
}
.video
{
position: relative;
left: 0px;
overflow: hidden;
text-align: center;
margin-top: 100px;
margin-bottom: 100px;
padding-top: 56.25%;
}
.video-responsive
{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>direccion</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel = "stylesheet" type = "text/css" href = "main.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head>
<body>
<div class = "center">
<div class="container">
<div class="header">
<h2>Agrega tu direccion</h2>
</div>
<form id="form" class="form">
<div class="form-control">
<label for="Nombre">Nombre Completo</label>
<input type="text" placeholder="Jose Luis Licea Alcaraz" id="nombre">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label for="Direccion">Direccion </label>
<input type="text" placeholder="Calle, Numero, Colonia" id="direccion">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label for="CodigoPostal">Codigo Postal </label>
<input type="text" placeholder="64860" id="cp">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label for="Telefono">Telefono </label>
<input type="tel" placeholder="+528112551388" id="tel">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label for="Pais">Pais </label>
<select name="pais" id="pais">
<option value="mexico">Mexico</option>
<option value="chile">Chile</option>
<option value="argentina">Argentina</option>
<option value="guatemala">Guatemala</option>
<option value="salvador">El Salvador</option>
<option value="santoDomingo">Santo Domingo</option>
</select>
</div>
<button>Enviar</button>
</form>
</div>
</div>
</body>
<footer>
<a target="_blank" href="https://www.facebook.com/gaming/Jeil0188">
<img src="facebookGaming.png" width=40 height="40">
</a>
<a target="_blank" href="https://www.facebook.com/Jeil0188">
<img src="facebookLogo.png" width=40 height="40">
</a>
<a target="_blank" href="https://www.twitch.tv/jl0188">
<img src="twitch_invertido.png" width=40 height="40">
</a>
<a target="_blank" href="https://www.instagram.com/jeil0188/">
<img src="instagramlogo_invertido.png" width=40 height="40">
</a>
<div class="footerContainer">
</div>
</footer>
</html>
请帮我找出错误,我不明白为什么它不会出现。我正在关注一个 youtube 教程并为我的项目定制它,我已经按照视频中的那个人的 css 代码进行操作,但没有成功。
编辑。我在代码片段中注意到它正在工作,但在我的实际代码中却没有。我有另外两个将交互的 HTML 文档,这有关系吗? 在此处输入图像描述
解决方案
好的,我找到了为什么它不起作用。
对于网络开发人员来说,我太新手了,我没有将它与 javascript 链接,这就是为什么它不能在我的浏览器上运行,但它在此处的代码段中运行。
刚刚在末尾添加
推荐阅读
- visual-studio - Visual Studio 2019 LLVM 中的 OpenMP 链接错误
- flutter - 无法更改 CountDownTimer 中的 endTime
- postgresql - 使用 Docker 和 Postgres 进行 Entity Framework 核心更新的最佳方式是什么?
- windows - 以编程方式启用 Windows 10 听写工具栏?
- ios - iOS:在受约束的子视图中居中 CAShapeLayer
- node.js - https.request() 给出错误:连接 ECONREFUSED 127.0.0.1:443
- leaflet - 旋转 imageOverlay 的问题
- javascript - 通过值将 html 表过滤到另一个表中并使用 javascript 删除列
- reactjs - ReactJS 将状态值作为参数传递给 onClick 事件函数
- java - 修复语法或拼写错误?