Question

我有一份表格中的年龄列表

<select id="age">
    <option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option><option value="32">32</option><option value="33">33</option><option value="34">34</option><option value="35">35</option><option value="36">36</option><option value="37">37</option><option value="38">38</option><option value="39">39</option><option value="40">40</option><option value="41">41</option><option value="42">42</option><option value="43">43</option><option value="44">44</option><option value="45">45</option><option value="46">46</option><option value="47">47</option><option value="48">48</option><option value="49">49</option><option value="50">50</option><option value="51">51</option><option value="52">52</option><option value="53">53</option><option value="54">54</option><option value="55">55</option><option value="56">56</option><option value="57">57</option><option value="58">58</option><option value="59">59</option><option value="60">60</option><option value="61">61</option><option value="62">62</option><option value="63">63</option><option value="64">64</option><option value="65">+65</option>
</select>

如果用户在按下表单提交按钮时没有选择任何内容，我需要添加一个跨度...

目前我一直在玩这个，但它不起作用......

$("#age").change(function(){
    if($(this).val() == "") {
    $("#age").after('<span class="register-error age-error">age</span>');
    } else {
    }
});

有什么想法吗？我想要的是什么？

Answer 1

我认为您必须要么寻找表单提交，要么必须初始化更改：

$("#age").change(function(){
     $("#age").after('<span class="register-error age-error">age</span>');
}).change(); // <----this way

你需要这种html：

<select id="age">
<option value="">choose</option> //<-----a blank value of the select

FIDDLE

Answer 2

问题在于，使用当前的HTML，始终会选择一个选项（始终选择18）。您需要添加一个空值的选项：

<select id="age">
    <option value="">Please select an option</option>
    <option value="18">18</option>
    <option value="19">19</option>
    ...
    ...
    <option value="65">+65</option>
</select>

Answer 3

请改为尝试：

$("#form-id").submit(function() {
  if ($("#age").val() == "") {
    $("<span class='register-error age-error'>age</span>").insertAfter("#age");
  }
});

Answer 4

HTML页面上已包含必填字段，但有隐藏元素。也许正好在表格之下。
使用jQuery检查用户是否在提交表单后将表单元素留空。使用jQuery's Submit Method为表单设置基本逻辑。然后在类似这样的方法中包含一个条件语句....

JS：

     if($(this).val() == "") {       
     showRequiredBoxEmail(); //this function shows the required message  
     }
     else {
     hideRequiredBoxEmail(); //this function hides the required message
     }

如果用户未在提交</option> </select>上更改<select> <option>，如何添加消息

4 个答案:

FIDDLE