0

I wanted to alert the user if he hasn't filled out the name field of my form using Javascript. But when I hit submit without filling the name, the alert doesn't popup. Here's my code

{% 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">
        <div class="form-group">
            <input type="text" id="name" name="name" value="Name" class="form-control">
        </div>

        <div class="form-group">
            <select name="Hostel" id="Hostel" class="form-control">
                <option selected hidden value="Hostel">Hostel</option>
                <option value="Cauvery">Cauvery</option>
                <option value="Sarayu">Sarayu</option>
                <option value="Ganga">Ganga</option>
                <option value="Jamuna">Jamuna</option>
            </select>
        </div>

        <div class="form-group">

                <div class="form-check">
                    <input class="form-check-input" id="GS" name="position" type="checkbox">
                    <label class="form-check-label" for="GS">
                        General Secretary
                    </label>
                </div>

                <div class="form-check">
                    <input class="form-check-input" id="SS" name="position" type="checkbox">
                    <label class="form-check-label" for="SS">
                        Sports Secretary
                    </label>
                </div>

                <div class="form-check">
                    <input class="form-check-input" id="LS" name="position" type="checkbox">
                    <label class="form-check-label" for="LS">
                        Literary Secretar
                    </label>
                </div>

                <div class="form-check">
                    <input class="form-check-input" id="CS" name="position" type="checkbox">
                    <label class="form-check-label" for="CS">
                        Cultural Secretary
                    </label>
                </div>

        </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('#name').value || !document.querySelector('#Hostel').value || !document.querySelector('#GS').value || !document.querySelector('#SS').value || !document.querySelector('#LS').value || !document.querySelector('#CS').value ||)
        {
            alert("Please fill out all the fields");
            return false;
        }
        return true;
    }

    </script>

{% endblock %}
2

Looks like the js is verifying that !document.querySelector('#name').value is not blank. And actually, it's likely never blank. Whyzat? Because it has a default value of "Name" by definition:

<input type="text" id="name" name="name" value="Name" class="form-control">

Perhaps you meant to use placeholder instead. (You could also make it required and let the browser worry about :)

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .