为什么我的验证表单的 javascript 代码不能按要求工作？答案

【问题标题】：Why my javascript code to validate form does not work as required?为什么我的验证表单的 javascript 代码不能按要求工作？
【发布时间】：2021-10-08 21:16:31
【问题描述】：

这就是任务：

实现一个联系表单组件。您的表单应该有：2 个文本输入、1 个单选按钮、1 个文本区域，1个提交按钮和右侧的可选图像，只是为了使表单看起来有点更好的。 ● 单击“提交”按钮时，应确认必填字段，并显示如果验证失败，则输入周围的红色边框。 ● 如果用户更正错误，您应该删除红色边框。 ● 当表单成功提交（没有验证错误）时，您应该显示一个包含用户名的确认横幅（最初是隐藏的）刚刚从输入字段中收集。还应打印输入字段中的所有信息在控制台中。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ContactFormValidation</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="contactFormContainer">
    <div class="container my-4">
        <div class="row">
            <div class="col-md-12">
                <div id="alert" class="alert" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
            </div>
            <div id="fields" class="col-md-6 mb-3">
                <form id="contactForm" action="#">
                    <div class="form-group">
                        <input type="text" id="firstName" class="form-control field" placeholder="First Name">
                    </div>
                    <div class="form-group">
                        <input type="text" id="lastName" class="form-control field" placeholder="Last Name">
                    </div>
                    <div class="form-group">
                        <label for="">Gender</label>
                        <fieldset id="gender">
                            <input type="radio" value="M" name="gender" checked> M
                            <input type="radio" value="F" name="gender"> F
                          </fieldset>
                    </div>
                    <div class="form-group">
                        <textarea name="message" id="message" class="form-control field" placeholder="Your message here ..."></textarea>
                    </div>
                    <div class="text-right">
                        <button class="btn btn-primary btn-submit">
                            Submit
                        </button>
                    </div>
            
                </form>
            </div>
            <div class="col-md-6">
                <img src="images/contact-us.jpeg" class="img-fluid" alt="contact us">
            </div>
        </div>
    </div>
</div>
<script src="app.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.alert {
    display: none;
}

.check {
    float: left;
    margin: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-right: 20px;
    background: #2B8F35;
    color: white;
    border-radius: 50%;
    text-align: center;
}

app.js

// get element from DOM : inputs, textarea and alert div and submit button
var alertMessage = document.getElementById('alert');
var inputFirstName = document.getElementById('firstName');
var inputLastName = document.getElementById('lastName');
var inputGender = document.getElementsByName('gender');
var textAreaMessage = document.getElementById('message');
var submitBtnForm = document.querySelector('.btn-submit');

// add event listener to inputs&textarea and button
inputFirstName.addEventListener('keyup', checkInputFirstNameFunction);
inputLastName.addEventListener('keyup', checkInputLastNameFunction);
textAreaMessage.addEventListener('keyup', checkTextAreaMessageFunction);
submitBtnForm.addEventListener('click', submitForm);

function checkInputFirstNameFunction(e){
    // console.log(e.target);
    if(e.target.value == 0){
        // console.log('is empty');
        inputFirstName.classList.add('is-invalid');
    } else {
        inputFirstName.classList.remove('is-invalid');
    }
}

function checkInputLastNameFunction(e){
    if(e.target.value == 0){
        inputLastName.classList.add('is-invalid');
    } else {
        inputLastName.classList.remove('is-invalid');
    }
}

function checkTextAreaMessageFunction(e){
    if(e.target.value == 0){
        textAreaMessage.classList.add('is-invalid');
    } else {
        textAreaMessage.classList.remove('is-invalid');
    }
    if (e.keyCode == 13) {
        submitForm(e);
    }
    e.preventDefault();
}

function submitForm(e){
    if  ( 
        inputFirstName.value == 0 ||   
        inputLastName.value == 0 || 
        textAreaMessage == 0 
        )
    {
        inputFirstName.classList.add('is-invalid');
        inputLastName.classList.add('is-invalid');
        textAreaMessage.classList.add('is-invalid');
    } 
    else {    
        inputFirstName.classList.remove('is-invalid');
        inputLastName.classList.remove('is-invalid');
        textAreaMessage.classList.remove('is-invalid');  
            alertMessage.classList.add('alert-success', 'd-block', 'show' ,'fade');
            alertMessage.innerHTML = 
                "<span class='check'>✓</span>" + 
                "Thank you for contacting us, " +
                inputFirstName.value +
                "<button type='button' class='close' data-dismiss='alert' aria-label='Close'>" + 
                "<span aria-hidden='true'>&times;</span>" + 
                "</button>";
            console.log('Firstname : ' + inputFirstName.value);
            console.log('Lastname : ' + inputLastName.value);
            for (i = 0; i < inputGender.length; i++) {
                if (inputGender[i].checked) {
                    console.log('Gender : ' + inputGender[i].value);       
                }        
            }  
            console.log('Message : ' + textAreaMessage.value);
    }
    e.preventDefault();
}

当用户按下提交或在文本中输入时，我无法做到这一点，以消除更正的错误，也就是说，如果一个字段已经是红色，我在其中输入了一些东西，如果我输入，错误就会消失直接在该输入/文本区域中，错误再次出现在更正的字段中

【问题讨论】：

如果您将代码复制并粘贴到在线沙箱中，一切似乎都按照要求进行（参见：jsfiddle.net/2hxq7Lar）。在您的 HTML 文件中，尝试将 <script src="app.js"></script> 移动到所有其他脚本标记之后；这可能会奏效
... 不，等等，它没有按预期工作：即使您只留一个字段为空，红色边框也会添加到所有个字段
我试过了，但它不起作用，如果我填写前两个字段并发送，它会验证我的表单，当我在 textarea 上输入或按发送按钮，我需要为空白字段添加一个红色边框，当我填写它们并在文本区域中再次按下发送或输入按钮时，我需要删除红色边框。从已完成的字段保留到不完整的字段
问题是您的submitForm(e) 正在尝试使用单个if ... else ... 语句验证所有字段，因此即使只有一个字段为空，所有字段都将被设置为无效。此外，您应该重复使用每个字段的验证逻辑，而不是重复提交事件。最后，空文本输入或文本区域的值是空字符串'' 不为零0
函数 submitForm(e){ if ( inputFirstName.value == 0 ){ inputFirstName.classList.add('is-invalid'); } else if ( inputLastName.value == 0 ) { inputLastName.classList.add('is-invalid') } else if ( textAreaMessage.value == 0 ) { textAreaMessage.classList.add('is-invalid');但这样一来，他就给我分别检查了，也就是说，他把我一个个脸红了

标签： javascript validation

【解决方案1】：

诀窍是尽可能将您的验证逻辑拆分为可重用的块，并在正确的时间以正确的顺序运行它们。

尝试以下方法：

// USE const INSTEAD OF var FOR PERFORMANCE.
const submitBtnForm = document.querySelector('.btn-submit');

const inputs = [
    document.getElementById('firstName'),
    document.getElementById('lastName'),
    document.getElementById('message')
];

// USE keydown EVENT TO HAVE MORE CONTROL ON USER INPUT ACTION (ACCESS PRESSED KEY AND EVENTUALLY PREVENT IT).
// USE input EVENT TO TRACK input CONTENT.
inputs.forEach((input) => {
    input.addEventListener('keydown', handler);
    input.addEventListener('input', handler);
});

submitBtnForm.addEventListener('click', submitForm);

function checkLength(target) {
    return !!target.value;
}

function submitOnEnterKey(e) {
    // USE === INSTEAD OF == FOR EQUALITY COMPARISON TO TAKE INTO ACCOUNT ALSO DATA TYPE.
    if (e.keyCode === 13) {
        submitForm(e);
        if (e.cancelable) {
            e.preventDefault();
        }
    }
}

function validate(target) {
    const result = checkLength(target);

    if (result) {
        target.classList.remove('is-invalid');
    } else {
        target.classList.add('is-invalid');
    }

    return result;
}

function handler(e) {
    if (e.type === 'input') {
        validate(e.target);
    } else {
        submitOnEnterKey(e);
    }
}

function submitForm(e) {
    const result = inputs.map((input) => validate(input)).every((val) => val);

    if (result) {
        alert('SUCCESS');
    } else {
        alert('FAILURE');
    }

    e.preventDefault();
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.alert {
    display: none;
}

.check {
    float: left;
    margin: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-right: 20px;
    background: #2B8F35;
    color: white;
    border-radius: 50%;
    text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ContactFormValidation</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="contactFormContainer">
    <div class="container my-4">
        <div class="row">
            <div class="col-md-12">
                <div id="alert" class="alert" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
            </div>
            <div id="fields" class="col-md-6 mb-3">
                <form id="contactForm" action="#">
                    <div class="form-group">
                        <input type="text" id="firstName" class="form-control field" placeholder="First Name">
                    </div>
                    <div class="form-group">
                        <input type="text" id="lastName" class="form-control field" placeholder="Last Name">
                    </div>
                    <div class="form-group">
                        <label for="">Gender</label>
                        <fieldset id="gender">
                            <input type="radio" value="M" name="gender" checked> M
                            <input type="radio" value="F" name="gender"> F
                          </fieldset>
                    </div>
                    <div class="form-group">
                        <textarea name="message" id="message" class="form-control field" placeholder="Your message here ..."></textarea>
                    </div>
                    <div class="text-right">
                        <button class="btn btn-primary btn-submit">
                            Submit
                        </button>
                    </div>
            
                </form>
            </div>
            <div class="col-md-6">
                <img src="images/contact-us.jpeg" class="img-fluid" alt="contact us">
            </div>
        </div>
    </div>
</div>
<script src="app.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

【讨论】：

非常感谢！