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
– Pablo Recalde, Commented Jun 25, 2019 at 8:51

Mamun · Accepted Answer · 2019-06-25 09:19:32Z

0

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>

edited Jun 25, 2019 at 9:19

answered Jun 25, 2019 at 8:53

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Professor Willow Over a year ago

Thanks! that worked. I tried it with .inputLastname but didn't know that 'id' needs a # selector.

Professor Willow Over a year ago

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

Mamun Over a year ago

@ProfessorWillow, . is for class and # for id:)

Mamun Over a year ago

@ProfessorWillow, try with name attribute like..... if (!document.querySelector('[name=algorithm]:checked')) for radio button:)

Mamun Over a year ago

@ProfessorWillow, I have included the condition for radio button in the answer and found that it is working accordingly:)

|

Jose Antonio Mingorance · Accepted Answer · 2019-06-25 09:06:48Z

0

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

answered Jun 25, 2019 at 9:06

Jose Antonio Mingorance

1096 bronze badges

Comments

Rohit Kaushik · Accepted Answer · 2019-06-25 09:18:29Z

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, 2019 at 9:18

Rohit Kaushik

1,30212 silver badges19 bronze badges

2 Comments

Professor Willow Over a year ago

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?

Rohit Kaushik Over a year ago

have you seen here stackoverflow.com/questions/10339073/…

Collectives™ on Stack Overflow

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

3 Answers 3

7 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related