在不点击提交按钮的情况下，使用javascript验证每个输入字段引导表单

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

 <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> 

姓名：
电邮：
电话：
查询原因：
餐饮
私人聚会
反馈
其他
其他信息：
你去过餐厅吗
对
不
与您联系的最佳时间：
M
T
W
Th
F
提交请求

您可以使用

表单上的
更改
事件

在使用此脚本更改任何字段后执行验证：

var form = document.forms.form1;

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

检查工作示例

这是一个非常简单的名称和电子邮件字段验证示例，只是为了让您了解如何实现它。我们可以添加新元素

，并使用它显示脚本中发现的错误：

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>";
    }
});

var form=document.forms.form1；
form.addEventListener（'change'，function（））{
document.querySelector（“#错误消息”）.innerHTML=”；
//验证名称
const input_name=document.querySelector（'#name'）.value；
如果（输入_name==“”）{
document.querySelector（“#错误消息”）.innerHTML+=“缺少名称
”；
}
//验证电子邮件
const input_email=document.querySelector（“#inputEmail3”）.value；
如果（输入\电子邮件==“”）{
document.querySelector（“#错误消息”）.innerHTML+=“电子邮件丢失
”；
}
});

---

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

您可以使用

表单上的
更改
事件
在使用此脚本更改任何字段后执行验证：

var form = document.forms.form1;

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

检查工作示例

这是一个非常简单的名称和电子邮件字段验证示例，只是为了让您了解如何实现它。我们可以添加新元素
，并使用它显示脚本中发现的错误：

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>";
    }
});

var form=document.forms.form1；
form.addEventListener（'change'，function（））{
document.querySelector（“#错误消息”）.innerHTML=”；
//验证名称
const input_name=document.querySelector（'#name'）.value；
如果（输入_name==“”）{
document.querySelector（“#错误消息”）.innerHTML+=“缺少名称
”；
}
//验证电子邮件
const input_email=document.querySelector（“#inputEmail3”）.value；
如果（输入\电子邮件==“”）{
document.querySelector（“#错误消息”）.innerHTML+=“电子邮件丢失
”；
}
});

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