表单验证未显示错误消息

Question

我正在尝试进行表单验证，但根本不显示错误消息。

我相信错误出在 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 文档，这有什么关系吗？ enter image description here

Answer 1

好的，我找到了为什么它不起作用。

对于网络开发人员来说，我是一个新手，我没有将它与 javascript 链接，这就是为什么它在我的浏览器上不起作用，但在此处的代码段中起作用。

刚刚添加在

的末尾