'JQuery - show/hide class and valdiation form

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 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>

My Jsfiddle HERE

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

javascripthtmljquery


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions