HTML/JavaScript：提交表单时如何使用警报（使用queryselector）？

我写了一些HTML表单，当没有提交任何内容时，表单应该发出警报。我从为名字创建这个开始。正如所料，“您必须提供您的全名！”未输入名称时显示。但是，当实际输入名称时，消息也会显示

{%extends“layout.html”%}

{%block main%}

<!-- http://getbootstrap.com/docs/4.1/content/typography/ -->
<h1 class="mb-3">Form</h1>

<!-- http://getbootstrap.com/docs/4.1/components/forms/ -->
<form action="/form" method="post" id="form_id">

    <div class="form-row names">
        <div class="form-group col-md-3 name1">
            <label for="inputFirstname">First name</label>
            <input type="name" autofocus class="form-control" id="inputFirstname" placeholder="First name">
        </div>
        <div class="form-group col-md-3 name2">
            <label for="inputLastname">Last name</label>
            <input type="name" class="form-control" id="inputLastname" placeholder="Last name">
        </div>
    </div>
    <div class="form-row clubs">
        <div class="form-group col-md-3">
            <label cfor="inlineFormCustomSelect">Club preference</label>
            <select class="custom-select" id="inlineFormCustomSelect">
                <option disabled selected value> -- select an option -- </option>
                <option value="1">PSV</option>
                <option value="2">Ajax</option>
                <option value="3">Feyenoord</option>
                <option value="4">De Graafschap</option>
                <option value="5">RKVV Bergeijk 2</option>
            </select>
            <div class="invalid-feedback">Please choose one option</div>
        </div>
    </div>
    <div class="form-group">
        <label for="PFoot">Preferred foot</label>
        <label class="form-check-label">
            <input type="radio" id="PFoot" name="algorithm" value="right">
            Right
        </label>
        <label class="form-check-label">
            <input type="radio" id="PFoot" name="algorithm" value="left">
            Left
        </label>
        <label class="form-check-label">
            <input type="radio" id="PFoot" name="algorithm" value="zweipotig">
            Zweipotig
        </label>
    </div>

    <!-- http://getbootstrap.com/docs/4.1/components/buttons/ -->
    <button class="btn btn-primary" type="submit">Submit</button>

</form>

<script>
    document.querySelector('form').onsubmit = function() {
        if (!document.querySelector('.name1').value) {
            alert('You must provide your full name!');
            return false;
        }

        return true;
    }

</script>

形式
名字
姓
俱乐部偏好
--选择一个选项--
PSV
AJAX
费耶诺德
德格拉夫沙普酒店
RKVV Bergeijk 2
请选择一个选项
首选脚
赖特
左边
茨维波蒂格
提交
document.querySelector（'form'）。onsubmit=function（）{
如果（！document.querySelector（'.name1'）.value）{
警报（'您必须提供您的全名！'）；
返回false；
}
返回true；
}

{%endblock%}

---

正如所料，“您必须提供您的全名！”未输入名称时显示。但是，当实际输入名称时，该消息也会显示…

您使用了错误的选择器（

.name1

），它引用的是div元素，而不是您正在考虑的输入。尝试

#输入firstname

document.querySelector（'form'）。onsubmit=function（）{
if（！document.querySelector（'#inputFirstname'）.value）{
警报（'您必须提供您的全名！'）；
返回false；
}
如果（！document.querySelector（'[name=algorithm]：checked'），则为else{
警报（“您必须提供首选脚！”）；
返回false；
}
返回true；
}

名字
姓
俱乐部偏好
--选择一个选项--
PSV
AJAX
费耶诺德
德格拉夫沙普酒店
RKVV Bergeijk 2
请选择一个选项
首选脚
赖特
左边
茨维波蒂格
提交

您使用了错误的选择器（

.name1

），它引用了div元素，而不是您正在考虑的输入。尝试

#输入firstname

document.querySelector（'form'）。onsubmit=function（）{
if（！document.querySelector（'#inputFirstname'）.value）{
警报（'您必须提供您的全名！'）；
返回false；
}
如果（！document.querySelector（'[name=algorithm]：checked'），则为else{
警报（“您必须提供首选脚！”）；
返回false；
}
返回true；
}

名字
姓
俱乐部偏好
--选择一个选项--
PSV
AJAX
费耶诺德
德格拉夫沙普酒店
RKVV Bergeijk 2
请选择一个选项
首选脚
赖特
左边
茨维波蒂格
提交

类name1是div，不是输入。然后您必须在querySelector中使用（“.name1 input”）

document.querySelector('form').onsubmit = function() {
    if (!document.querySelector('.name1 input').value) {
        alert('You must provide your full name!');
        return false;
    }

    return true;
}

---

类name1是div，不是输入。然后您必须在querySelector中使用（“.name1 input”）

document.querySelector('form').onsubmit = function() {
    if (!document.querySelector('.name1 input').value) {
        alert('You must provide your full name!');
        return false;
    }

    return true;
}

就我而言，它起作用了

<script>
document.querySelector('form').onsubmit = function() {
    if (!document.querySelector('#inputFirstname').value) {
        alert('You must provide your full name!');
        return false;
    }

    return true;
}

document.querySelector（'form'）。onsubmit=function（）{
if（！document.querySelector（'#inputFirstname'）.value）{
警报（'您必须提供您的全名！'）；
返回false；
}
返回true；
}

在我的情况下，它是有效的

<script>
document.querySelector('form').onsubmit = function() {
    if (!document.querySelector('#inputFirstname').value) {
        alert('You must provide your full name!');
        return false;
    }

    return true;
}

document.querySelector（'form'）。onsubmit=function（）{
if（！document.querySelector（'#inputFirstname'）.value）{
警报（'您必须提供您的全名！'）；
返回false；
}
返回true；
}

---

querySelector

返回第一个当前值。您确定页面上没有其他

表单

？类似于登录弹出窗口或其他什么？.name1是div not input use（“.name1 input”）

querySelector

返回第一次出现。您确定页面上没有其他

表单

？像登录弹出窗口之类的？.name1是div而不是input使用（“.name1 input”）谢谢！成功了。我用.inputLastname试过，但不知道“id”需要一个选择器。它是如何与收音机类型一起工作的？否则如果（！document.querySelector（'#PFoot'）.value）{alert（'You must provided your preferred foot！'），则返回false；}这不是working@ProfessorWillow,

代表班级，

#

代表id:）@ProfessorWillow，尝试使用

名称

属性，如

如果（！document.querySelector（'[name=algorithm]：checked'））

单选按钮：）@ProfessorWillow，我已在答案中包含单选按钮的条件，并发现它相应地工作：）谢谢！成功了。我用.inputLastname试过，但不知道“id”需要一个选择器。它是如何与收音机类型一起工作的？else if（！document.querySelector（'#PFoot'）.value）{