Question

如果在使用JavaScript点击提交按钮后没有选择下拉菜单，如何在下拉列表中输入错误消息？

编辑：下拉单击提交按钮后会出现错误消息。但是如何自定义消息？

我有以下表单下拉列表：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＆＃39; birth_M＆＃39;），然后插入这个jQuery代码

$(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;  
     }
  });
});

查看这个小提琴https://jsfiddle.net/wx38rz5L/453/

Answer 2

您应该使用required属性来制作所需的列表。所需属性也适用于select标记。它看起来像这样：

<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

您只需将所需内容添加到选择列表即可。工作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

您还可以使用 PHP 来显示自己的错误消息，而不是使用 Javascript ：

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

如何在下拉列表中输入错误消息？

4 个答案: