javascript - 使用 javascript 验证每个输入字段 Bootstrap 表单，无需点击提交按钮

Question

我是 JS 新手，我有以下表单，我需要 javascript 代码来验证每个字段，而无需单击提交按钮。提前致谢我是 JS 新手，我有以下表单，我需要 javascript 代码来验证每个字段，而无需单击提交按钮。提前致谢

 <form action="" id = "form1"class = "form-group row">
            <table class = "form-table">
                <tr>
                   <td class = "col-sm-2 col-form-label">Name:</td>
                    <td><input type="text" class="form-control" id="name" placeholder="Name" value="" required="required" data-error="Please enter your full name.">
                        <div class="help-block with-errors"></div></td>
                </tr>


                <tr>
                    <td label for="email" class="col-sm-2 col-form-label" >Email:</td>
                    <td><input type="email" class="form-control" id="inputEmail3" placeholder="name@example.com" required="required"> 
                </tr>

                <tr>
                    <td label for="inputPhone3" class="col-sm-2 col-form-label">Phone:</td>
                    <td><input type="number" class="form-control" required="required" id="phone" placeholder="Phone"></td>
                </tr>

                <tr>
                   <td class = "sel1">Reason for Inquiry:</td>
                    <td><select class="form-control" required="required" id="sel1">
                        <option value="catering">Catering</option>
                        <option value="privateparty">Private party</option>
                        <option value="feedback">Feedback</option>
                        <option value="other">other</option>
                    </select>
                    </td>
                </tr>


                <tr>
                   <td class = "form-group">Additional Information:</td>
                    <td><textarea class="form-control" rows="5" id="comment"></textarea></td>
                </tr>

                <tr>
                    <td>Have you been to resturant:</td>
                   <td> <input type="radio" required="required" name="optradio"> Yes
                    <input type="radio" name="optradio"> No</td>
                </tr>

                <tr>
                    <td class = "form-check-input"> Best days to contact you:</td>
                    <td><input type="checkbox" required="required" name="m">M
                    <input class="form-check-input" type="checkbox" name="t">T
                    <input class="form-check-input" type="checkbox" type="checkbox" name="W">W
                    <input class="form-check-input" type="checkbox" type="checkbox" name="Th">Th
                    <input class="form-check-input" type="checkbox" type="checkbox" name="F">F</td>
                </tr>

                <tr>
                    <td></td>
                    <td><button class="btn btn-primary">Submit Request</button></td>
                </tr>

            </table>
          </form> 

Answer 1

您可以使用change事件在您的form使用此脚本在任何字段更改后执行验证:

var form = document.forms.form1;

form.addEventListener('change', function() {
    alert('Changed');
    // Add your validation code here
});

检查工作示例 here

这是一个非常简单的姓名和电子邮件字段验证示例，只是为了让您了解如何实现它。我们可以添加新元素<div id="error-message" /> ，并用它来显示脚本中发现的错误:

var form = document.forms.form1;

form.addEventListener('change', function() {
    document.querySelector('#error-message').innerHTML = '';    

    // Validate Name
    const input_name = document.querySelector('#name').value;
    if (input_name == "") {
        document.querySelector('#error-message').innerHTML += "Name is missing<br>";
    }
    // Validate Email
    const input_email = document.querySelector('#inputEmail3').value;
    if (input_email == "") {
        document.querySelector('#error-message').innerHTML += "Email is missing<br>";
    }
});

当然，您需要实现比这更好的验证并决定如何显示消息，但基本的工作示例是 here