如何使用JavaScript验证表单字段？

Question

Noob, trying to create a simple form, and validate the inputs on same. However, I don't know how to properly select each input in js, so nothing is happening. I am just learning html, bootstrap and javascript, so simpler (pythonic) answers are preferred to more complex ones.

I've read the documentation, and a number of other stackoverflow posts on this exact topic, which would have likely answered my question, were I not a Noob.

<div class="form-group"> 
        <label for="first_name">First Name</label>
        <input autocomplete="off" autofocus="" class="form-control" name="first_name" placeholder="First Name" type="text">
        <small id="first_name_Help" class="form-text text-muted">* First Name is Mandatory.</small>
    </div>

    <div class="form-group"> 
        <label for="last_name">Last Name</label>
        <input autocomplete="off" autofocus="" class="form-control" name="last_name" placeholder="Last Name" type="text">
        <small id="last_name_Help" class="form-text text-muted">* Last Name is Mandatory.</small>
    </div>

    <p>Select Your Country of Residence Below</p>

    <div class="form-group">
        <select name="country">

            <option disabled selected value="">Country</option>
            <option value="Canada">Canada</option></option>
            <option value="USA">USA</option></option>
            <option value="Mexico">Mexico</option>
            <option value="None of the Above">None of the Above</option>
        </select>
    </div>

    <script>

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

Answer 1

Your selector is wrong:

document.querySelector('input.first_name').value

You're selecting an input element with a "first_name" class . Your input class name is "form-control" and also it's not unique (which is fine). You must select using their name attributes. Like this:

document.querySelector('input[name=first_name]').value

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors#Selectors_article_overview

Answer 2

You can validate a form with Javascript or as an alternative use the built-in validation of HTML5 . In the snipppet below I'm using the "required" keyword to make an input field mandatory.

 input:invalid { border: solid red; } input:valid { border: solid green; } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="form-group"> <label for="first_name">First Name</label> <input autocomplete="off" autofocus="" class="form-control" name="first_name" placeholder="First Name" type="text" required> <small id="first_name_Help" class="form-text text-muted">* First Name is Mandatory.</small> </div> <div class="form-group"> <label for="last_name">Last Name</label> <input autocomplete="off" autofocus="" class="form-control" name="last_name" placeholder="Last Name" type="text" required> <small id="last_name_Help" class="form-text text-muted">* Last Name is Mandatory.</small> </div> <p>Select Your Country of Residence Below</p> <div class="form-group"> <select name="country"> <option disabled selected value="">Country</option> <option value="Canada">Canada</option> </option> <option value="USA">USA</option> </option> <option value="Mexico">Mexico</option> <option value="None of the Above">None of the Above</option> </select> </div> <button>Submit</button>