如何在Javascript

Question

对于学校作业，我不得不重新设计一个网站，这是我网站的一部分，我为用户创建了一个表单。这是我的第一年，一切都是新的，所以如果我不明白你说的话，不要生我的气！:)！ This is the design of the website and all the other input fields are allready validated, because it's a long code I didn't want to share it here

我的老师告诉我，我使用的Javascript越多，获得的分数就越高。他还说所有表单验证都需要在Javascript中完成。

我已经对其他输入字段进行了验证，但是使用HTML select标签/下拉菜单我没有成功。我尝试了不同的代码和方法，但没有..此时我没有任何代码用于select标签，只有我已经为其他输入字段做了..

这是选择标记/下拉菜单的HTML代码

<label for ="data">Kies een datum</label>
        <select name="datum">
        <option value="datum">15 april 2017</option>
        <option value="datum">18 april 2017</option>
        <option value="datum">21 april 2017</option>
        <option value="datum">26 april 2017</option> 

我希望这个下拉菜单是一个警报，目前没有选择任何选项...

Answer 1

您需要向required添加select属性，然后您需要一个空选项（空值）。

这将在支持的浏览器中警告用户。您仍然应该在后端验证代码，否则不支持的浏览器仍会发送数据。

<form action="" method="post">
    <label for="data">Kies een datum</label>
    <select id="data" name="datum" required>
        <option value="">Please Select a date...</option>
        <option value="datum">15 april 2017</option>
        <option value="datum">18 april 2017</option>
        <option value="datum">21 april 2017</option>
        <option value="datum">26 april 2017</option>
    </select>
    <input type="submit">
</form>

以下是Chrome中的结果

Answer 2

您的代码块存在一些问题。 label标签的for属性应与select标签的id属性相对应。每个选项的value属性应该是唯一的，最好是机器可读的。

<label for="datum">Kies een datum</label>
<select name="datum" id="datum">
  <option value=""></option>
  <option value="2017-04-15">15 april 2017</option>
  <option value="2017-04-18">18 april 2017</option>
  <option value="2017-04-21">21 april 2017</option>
  <option value="2017-04-26">26 april 2017</option>
</select>

之后，您可以检查该字段是否为非空值。

jQuery的：

if ($('select[name="datum"]').val()){
    // has a value so do something
} else {
    // is empty so do something else
}

Vanilla JS：

var datum = document.getElementById('datum');
var datumValue = datum.options[datum.selectedIndex].value;

Answer 3

当用户提交表单时，会触发form元素的submit事件。这是您可以进行所有验证的事件（假设您可以等到用户提交通知他们存在验证错误）。

另一个注意事项。 label元素必须指向与id属性相关的元素的for。您的label指向data，但您的select根本没有id。

以下是可用的HTML和JavaScript：

// First, get a reference to the form. There are many ways to do that
// but, in the HTML, I've given the form an id and that is a simple
// way to find it in JavaScript
var frm = document.getElementById("frmTest");

// We'll also need a reference to any other HTML elements you want to work with
var sel = document.getElementById("data");

// Now, set up the form to call a function when its submit event is triggered
frm.addEventListener("submit", validate);

// Here's the function that will be executed when the submit event occurs
// It will automaticaly be passed an argument that represents the submit
// event itsef (here, we're receiving it as "evt").
function validate(evt){

  // Perform any validations you desire
  
  // Check to see if the user has selected anything from the drop down
  if(sel.value === ""){
    // The select has no value, so the first option must still be chosen
    
    evt.preventDefault();  // cancel the submit event
    evt.stopPropagation(); // stop the event from bubbling to other elements
    
    alert("You haven't chosen anything from the list!");
  }
  
  // The select has a value. Let the event proceed as normal.


}

<form action="#" method="" id="frmTest">
 
   <!-- The "for" attribute must point to the "id" of another element -->
  <label for ="data">Kies een datum</label>
  
  <select name="datum" id="data">
    <!-- Notice that the first option has an empty string as its value?
         That's what will make the first option not a valid choice.      -->
    <option value="">...Please Choose...</option>
    <option value="datum">15 april 2017</option>
    <option value="datum">18 april 2017</option>
    <option value="datum">21 april 2017</option>
    <option value="datum">26 april 2017</option> 
  </select>
  
  <button type="submit">Submit</button>
    
</form>