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

Question

I wrote some HTML form where the form should alert when nothing is submitted. I started with creating this for the names. As expected, the message 'You must provide your full name!' shows when no name is entered. However, the message also shows up when the names are actually entered…

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

{% endblock %}

As expected, the message 'You must provide your full name!' shows when no name is entered. However, the message also shows up when the names are actually entered…

Answer 1

You are using the wrong selector ( .name1 ) which refers a div element, not the input you are thinking. Try #inputFirstname

 document.querySelector('form').onsubmit = function() { if (!document.querySelector('#inputFirstname').value) { alert('You must provide your full name!'); return false; } else if(!document.querySelector('[name=algorithm]:checked')){ alert('You must provide Preferred foot!'); return false; } return true; } 

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

Answer 2

The class name1 is div, not an input. Then you have to use (".name1 input") in the querySelector

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

    return true;
}

Answer 3

in my case it's worked

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

    return true;
}