JQuery - show/hide class and valdiation form-CodePudding

when I input the seconds form, the minutes form will hide and not show alert('Field Form minutes'); , and vice versa if I input the minutes form, then from seconds will hide and 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 >
            <label>EMAIL:</label>
            <input type="email"  id="email-input" placeholder="[email protected]">
         </div>
         <div >
            <label>TYPE TIME:</label>
            <select  name="type_time" id="type_time">
               <option value="">SELECT TYPE...</option>
               <option value="seconds">SECONDS</option>
               <option value="minutes">MINUTES</option>
            </select>
         </div>
         <div  id="form-seconds">
            <label>SECONDS:</label>
            <input type="text"  id="seconds-input">
         </div>
         <div  id="form-minutes">
            <label>MINUTES:</label>
            <input type="text"  id="minutes-input">
         </div>
         <button type="submit"  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>

My Jsfiddle HERE

I've done several experiments, but can't find a solution to do it. whether to use .removeClass(); ?

CodePudding user response：

You just need to know, which menu is open then! I have used simple global variable menu to find which menu is open. After declaring menu as 0, if something from drop-down is selected menu is changed to 1 for minutes and 2 for seconds:

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

Lastly, don't forget to add conditions:

...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');
        }

Here's the whole code:

//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 >
      <label>EMAIL:</label>
      <input type="email"  id="email-input" placeholder="[email protected]">
    </div>
    <div >
      <label>TYPE TIME:</label>
      <select  name="type_time" id="type_time">
        <option value="">SELECT TYPE...</option>
        <option value="seconds">SECONDS</option>
        <option value="minutes">MINUTES</option>
      </select>
    </div>
    <div  id="form-seconds">
      <label>SECONDS:</label>
      <input type="text"  id="seconds-input">
    </div>
    <div  id="form-minutes">
      <label>MINUTES:</label>
      <input type="text"  id="minutes-input">
    </div>
    <button type="submit"  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>