Question

我写了一些HTML表单，该表单应在未提交任何内容时发出警报。我从创建名称开始。如预期的那样，消息“您必须提供全名！”当未输入名称时显示。但是，当实际输入名称时，也会显示该消息……

{％扩展了“ 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％}

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

Answer 1

您使用了错误的选择器（.name1），该选择器引用了div元素，而不是您在考虑的输入。尝试#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

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

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

    return true;
}

Answer 3

在我看来，它是有效的

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

    return true;
}

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

3 个答案: