JQuery-顯示/隱藏類和驗證表單-有解無憂

當我輸入秒表時，分鐘表會隱藏而不顯示alert('Field Form minutes');，反之亦然，如果我輸入分鐘表，那么秒表會隱藏并且alert('Field Form seconds');

$(document).ready(function () {
  $("#form-seconds, #form-minutes").hide();
  $('select[name="type_time"]').change(function () {
    if ($(this).val() === "seconds") {
      $("#form-seconds").show();
      $("#form-minutes").hide();
    } else if ($(this).val() === "minutes") {
      $("#form-minutes").show();
      $("#form-seconds").hide();
    } else {
      $("#form-seconds, #form-minutes").hide();
    }
  });
});


 $("#buttonsubmit").click(function () {
    if ($("#email-input").val() == "") {
        $("#email-input").focus();
        alert('Field Form Email');  
    } else if ($("#seconds-input").val() == "") {
        $("#seconds-input").focus();
        alert('Field Form Seconds');
     } else if ($("#minutes-input").val() == "") {
        $("#minutes-input").focus();
        alert('Field Form minutes');
     }
 });

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
   </head>
   <body>
      <form>
         <div class="form-group">
            <label>EMAIL:</label>
            <input type="email" class="form-control" id="email-input" placeholder="[email protected]">
         </div>
         <div class="form-group">
            <label>TYPE TIME:</label>
            <select class="form-control" name="type_time" id="type_time">
               <option value="">SELECT TYPE...</option>
               <option value="seconds">SECONDS</option>
               <option value="minutes">MINUTES</option>
            </select>
         </div>
         <div class="form-group" id="form-seconds">
            <label>SECONDS:</label>
            <input type="text" class="form-control" id="seconds-input">
         </div>
         <div class="form-group" id="form-minutes">
            <label>MINUTES:</label>
            <input type="text" class="form-control" id="minutes-input">
         </div>
         <button type="submit" class="btn btn-primary" id="buttonsubmit">Submit</button>
      </form>
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
   </body>
</html>

我的 Jsfiddle這里

我已經做了幾個實驗，但找不到解決方案。是否使用.removeClass();？

uj5u.com熱心網友回復：

你只需要知道，然后打開哪個選單！我使用簡單的全域變數menu來查找打開的選單。宣告menu為 0 后，如果從下拉串列中選擇某些menu內容，則將分鐘更改為 1，秒更改為 2：

     ...if ($(this).val() === "seconds") {
          $("#form-seconds").show();
          $("#form-minutes").hide();
          //menu's changed to 2
          menu = 2;
        } else if ($(this).val() === "minutes") {
          $("#form-minutes").show();
          $("#form-seconds").hide();
          //menu's changed to 1
          menu = 1;
        } else {
          $("#form-seconds, #form-minutes").hide();
        }

最后，不要忘記添加條件：

...else if ($("#seconds-input").val() == "") {
        //checking if selected menu is 2
        if (menu == 2) {
          $("#seconds-input").focus();
          alert('Field Form Seconds');
        }
      } else if ($("#minutes-input").val() == "") {
        //checking if selected menu is 1
        if (menu == 1) {
          $("#minutes-input").focus();
          alert('Field Form minutes');
        }

這是整個代碼：

//menu=0, means nothing selected, 1 means minutes form is selected and 2 means seconds-form.
var menu = 0;
$(document).ready(function() {
  $("#form-seconds, #form-minutes").hide();
  $('select[name="type_time"]').change(function() {
    if ($(this).val() === "seconds") {
      $("#form-seconds").show();
      $("#form-minutes").hide();
      menu = 2;
    } else if ($(this).val() === "minutes") {
      $("#form-minutes").show();
      $("#form-seconds").hide();
      menu = 1;
    } else {
      $("#form-seconds, #form-minutes").hide();
    }
  });
});


$("#buttonsubmit").click(function() {
  if ($("#email-input").val() == "") {
    $("#email-input").focus();
    alert('Field Form Email');
  } else if ($("#seconds-input").val() == "") {
    if (menu == 2) {
      $("#seconds-input").focus();
      alert('Field Form Seconds');
    }
  } else if ($("#minutes-input").val() == "") {
    if (menu == 1) {
      $("#minutes-input").focus();
      alert('Field Form minutes');
    }
  }
});

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
  <form>
    <div class="form-group">
      <label>EMAIL:</label>
      <input type="email" class="form-control" id="email-input" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label>TYPE TIME:</label>
      <select class="form-control" name="type_time" id="type_time">
        <option value="">SELECT TYPE...</option>
        <option value="seconds">SECONDS</option>
        <option value="minutes">MINUTES</option>
      </select>
    </div>
    <div class="form-group" id="form-seconds">
      <label>SECONDS:</label>
      <input type="text" class="form-control" id="seconds-input">
    </div>
    <div class="form-group" id="form-minutes">
      <label>MINUTES:</label>
      <input type="text" class="form-control" id="minutes-input">
    </div>
    <button type="submit" class="btn btn-primary" id="buttonsubmit">Submit</button>
  </form>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/440139.html

標籤：javascript html jQuery

上一篇：如果回傳值為真，請勾選復選框

下一篇：jQuery獲取嵌套元素相對于具有相同類的其他嵌套元素的索引