How to validate form input with JavaScript

Question

I have a form with more than 10 input/select options but i wish to show most of this form inputs when 4 of my fields specifically are filled.

I've done some research and found

$('input[type="text"]').each(function(){
  // do my things here...
});

but this has 2 issues:

1. It doesn't work when i fill inputs
2. One of my fields is select option and here only tries to get inputs

Code

$(function() {
  // show choices DIV only if all fields are filled.
  $('input[type="text"]').each(function() {
    if ($(this).val() != "") {
      $('.choices').show();
    } else {
      $('.choices').hide();
    }
  });
});

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />


<form action="" method="POST">
  <div class="row">
    <div class="col-md-3">
      <div class="form-group">
        <div class="sm-form-design">
          <input id="seq_no" type="text" class="form-control" name="seq_no" required>
          <label for="seq_no" class="control-label">Seq No.</label>
        </div>
      </div>
    </div>
    <div class="col-md-9">
      <div class="form-group">
        <div class="sm-form-design">
          <input id="question" type="text" class="form-control" name="question" required>
          <label for="question" class="control-label">Question</label>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 sm-form-design">
      <select name="type" id="type" class="form-control">
        <option value="dropdown">Dropdown</option>
        <option value="multiple">Multiple</option>
        <option value="radio">Radio Buttons</option>
        <option value="input">Input</option>
      </select>
      <label for="type" class="control-label">Type</label>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <div class="sm-form-design">
          <input type="text" name="quiz_time" class="form-control" id="masked-input-time" required>
          <label for="quiz_time" class="control-label">Time *</label>
        </div>
      </div>
    </div>
  </div>

  <!-- show this part when all fields above are filled -->
  <div class="row choices">
    <div class="col-md-12">
      <h5>Choices:</h5>
    </div>
  </div>
  </div>

  <button type="submit" class="btn btn-primary">Save</button>
</form>

Question

How can I validate all my first 4 fields before showing rest of the form?

Any idea?

Answer 1

While Shiladitya's answer works, and is closest to your own code, I find it cleaner to handle forms by serializing data into an object as input occurs. This allows you to more easily reason about validation, as you only have to validate an object, not DOM elements.

Here is a pared down example:

$(function() {
  const formData = {}
  const $form = $('#form-a')
  const $partTwo = $('#part-2')
  
  // some real validation here
  const isValidPartOne = data =>
    data.a && data.b && data.c
  
  const showPartTwo = () => $partTwo.show()

  $form.on('input', ({target}) => {
    formData[target.name] = target.value
    
    // form data is available at all times
    console.log('formData =', formData)

    if (isValidPartOne(formData)) {
      showPartTwo()
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="form-a">
  <div id="part-1">
    PART 1
    <input name="a" />
    <input name="b" />
    <select name="c">
      <option value="" disabled selected>Choose One</option>
      <option value="a">A</option>
      <option value="b">B</option>
    </select>
  </div>
  
  <div id="part-2" style="display:none;">
    PART 2
    <input name="d" />
  </div>

</form>

Answer 2

Here you go with a solution

$(function() {

  $('.choices').hide();

  // show choices DIV only if all fields are filled.
  $('select').change(function() {
    validateInput();
  });
  
  $('input[type="text"]').keyup(function() {
    validateInput();
  });
  
  function validateInput() {
   var valid = true;
    $('input[type="text"], select').each(function() {
      if ($(this).val() === "") {
        valid = false;
      }
    });

    if (valid) {
     $('.choices').show();
    } else {
     $('.choices').hide();
    }
  }
});

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />


<form action="" method="POST">
  <div class="row">
    <div class="col-md-3">
      <div class="form-group">
        <div class="sm-form-design">
          <input id="seq_no" type="text" class="form-control" name="seq_no" required>
          <label for="seq_no" class="control-label">Seq No.</label>
        </div>
      </div>
    </div>
    <div class="col-md-9">
      <div class="form-group">
        <div class="sm-form-design">
          <input id="question" type="text" class="form-control" name="question" required>
          <label for="question" class="control-label">Question</label>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 sm-form-design">
      <select name="type" id="type" class="form-control">
        <option value="dropdown">Dropdown</option>
        <option value="multiple">Multiple</option>
        <option value="radio">Radio Buttons</option>
        <option value="input">Input</option>
      </select>
      <label for="type" class="control-label">Type</label>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <div class="sm-form-design">
          <input type="text" name="quiz_time" class="form-control" id="masked-input-time" required>
          <label for="quiz_time" class="control-label">Time *</label>
        </div>
      </div>
    </div>
  </div>

  <!-- show this part when all fields above are filled -->
  <div class="row choices">
    <div class="col-md-12">
      <h5>Choices:</h5>
    </div>
  </div>
  </div>

  <button type="submit" class="btn btn-primary">Save</button>
</form>

OnChange of any input, please iterate through all the inputs just to check whether each input is empty or has value.

Here you go with a solution for your problem 1 that you mentioned in the comment box

$(function() {

  $('.choices').hide();

  // show choices DIV only if all fields are filled.
  $('select').change(function() {
    validateInput();
  });

  $('input[type="text"]').keyup(function() {
    validateInput();
  });

  // --- Whenever you make an action you can call this method to validate your inputs ----
  function validateInput() {
    var valid = true;
    $('input[type="text"], select').each(function() {
      if ($(this).val() === "") {
        valid = false;
      }
    });

    if (valid) {
      $('.choices').show();
    } else {
      $('.choices').hide();
    }
  }
});

Answer 3

I am not in a place to properly test but looking at your function I would make the following changes,

$(function() {
  // show choices DIV only if all fields are filled.
  var flag = false
  $('input[type="text"]').each(function() {
    if ($(this).val() != "") {
      flag = true
    } else {
      flag = false
    }
  });
  if (flag) {
     $('.choices').show();
  } else {
     $('.choices').hide();
  }
});
$('input[type="text"]').keyup(function() {
  // call function
});
$('input[type="text"]').keydown(function() {
  // call function
});