ドロップダウンリストにエラーメッセージを挿入するにはどうすればよいですか？

Question

JavaScriptを使用して送信ボタンをクリックした後にドロップダウンが選択されていない場合、ドロップダウンリストにエラーメッセージを挿入する方法はありますか？

EDIT：送信ボタンをクリックすると、ドロップダウンにエラーメッセージが表示されます。しかしメッセージをカスタマイズするには？

私はドロップダウンで次の形式を持っている

：https://jsfiddle.net/6jgyfzeo/2/

<form id="form" onsubmit="return(login())"> 
<input type="submit" name="submit" value="Log In"/><input type="text" id="username" required placeholder="Enter Name" 
oninvalid="this.setCustomValidity('Enter User Name Here')" 
oninput="setCustomValidity('')" /> 
<input name="pass" type="password" placeholder="Password" required/> 
<select name="birth_M" id="birth_M"> 
      <option value="" selected disabled>Month</option> 
      <option value="01">January</option> 
      <option value="02">February</option> 
      <option value="03">March</option> 
      <option value="04">April</option> 
      <option value="05">May</option> 
      <option value="06">June</option> 
      <option value="07">July</option> 
      <option value="08">August</option> 
      <option value="09">September</option> 
      <option value="10">October</option> 
      <option value="11">November</option> 
      <option value="12">December</option> 
     </select> 

Answer 1

selectタグのIDを与える（私はそれをID 'birth_M' を与えた）、その後、

$(document).ready(function() { 
    $("#form").submit(function(event) { //catches the submit event 
    if(!$('#birth_M').val()){ //check if select got any value 
     alert("You Error message"); 
     return; 
    } 
    }); 
}); 

このjQueryのコードを挿入

このフィドルhttps://jsfiddle.net/wx38rz5L/453/

Answer 2

をチェックしてくださいまた、01でWORKDリスト必須。必要な属性を作るためにrequired属性を使用する必要がありますタグ。 それは次のようになります。

<select name="birth_M" id="birth_M" required> 
       <option value="" selected disabled>Month</option> 
       <option value="01">January</option> 
       <option value="02">February</option> 
       <option value="03">March</option> 
       <option value="04">April</option> 
       <option value="05">May</option> 
       <option value="06">June</option> 
       <option value="07">July</option> 
       <option value="08">August</option> 
       <option value="09">September</option> 
       <option value="10">October</option> 
       <option value="11">November</option> 
       <option value="12">December</option> 
      </select> 

Answer 3

あなただけSelectListのに必須追加することができます。 ワーキングJSFiddle： https://jsfiddle.net/MFasseur/woth5t6s/

<form id="form" onsubmit="return(login())"> 
    <input type="submit" name="submit" value="Log In"/><input type="text" id="username" required placeholder="Enter Name" oninvalid="this.setCustomValidity('Enter User Name Here')" oninput="setCustomValidity('')" /> 
    <input name="pass" type="password" placeholder="Password" required/> 
    <select name="birth_M" id="birth_M" required> 
    <option value="" selected disabled>Month</option> 
    <option value="01">January</option> 
    <option value="02">February</option> 
    <option value="03">March</option> 
    <option value="04">April</option> 
    <option value="05">May</option> 
    <option value="06">June</option> 
    <option value="07">July</option> 
    <option value="08">August</option> 
    <option value="09">September</option> 
    <option value="10">October</option> 
    <option value="11">November</option> 
    <option value="12">December</option> 
</select> 

Answer 4

あなたはまた、代わりにのJavascriptを使用して、独自のエラーメッセージを表示するようにPHPを使用することができます。

<?php 
if(empty($_REQUEST['birth_M'])) 
{ 
echo "You must select something from the list first1"; 
}; 
?>