Question

Noob，尝试创建一个简单的表单，并验证该表单上的输入。但是，我不知道如何正确选择js中的每个输入，因此什么也没有发生。我只是在学习html，bootstrap和javascript，因此，较简单的（pythonic）答案优先于较复杂的答案。

我已经阅读了文档，并且在这个确切的主题上有许多其他stackoverflow帖子，如果我不是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

您的选择器错误：

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

您正在选择一个带有“ first_name” class 的input元素。您输入的类名称是“ form-control”，它也不是唯一的（可以）。您必须使用它们的name属性进行选择。像这样：

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

您可以使用Java验证表单，也可以使用built-in validation of HTML5来验证表单。在下面的代码段中，我使用“ required”关键字将输入字段设为必填项。

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>

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

2 个答案: