HTML/JavaScript: How to use alert when submitting a form (with 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…

`querySelector` returns the first ocurrence. Are you sure there's no other `form` on the page? Like a login popup or something? — Pablo Recalde, Jun 25 '19 at 08:51

Mamun · Accepted Answer · 2019-06-25T09:19:32.130

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>

Thanks! that worked. I tried it with .inputLastname but didn't know that 'id' needs a # selector. — Professor Willow, Jun 25 '19 at 08:58
And how does it work with the radio types? else if (!document.querySelector('#PFoot').value) { alert('You must provide your preferred foot!'); return false; } This is not working — Professor Willow, Jun 25 '19 at 09:06
@ProfessorWillow, try with `name` attribute like..... `if (!document.querySelector('[name=algorithm]:checked'))` for radio button:) — Mamun, Jun 25 '19 at 09:12
@ProfessorWillow, I have included the condition for radio button in the answer and found that it is working accordingly:) — Mamun, Jun 25 '19 at 09:20
@Manum Ah, yeah thanks. Forgot to remove the .value …. stupid — Professor Willow, Jun 25 '19 at 09:26

score 0 · Answer 2 · answered Jun 25 '19 at 09:06

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

score 0 · Answer 3 · answered Jun 25 '19 at 09:18

0

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

answered Jun 25 '19 at 09:18

Rohit Kaushik

1,182
12
18

Thanks for your answer, it has worked with me as well. But now i'm struggling with the radio types. Do you have a solution for that? – Professor Willow Jun 25 '19 at 09:21
have you seen here https://stackoverflow.com/questions/10339073/radio-button-validation-in-javascript – Rohit Kaushik Jun 25 '19 at 09:27

HTML/JavaScript: How to use alert when submitting a form (with queryselector)?

3 Answers3