JSFiddle - React, Tailwind, and code Playground

by Teo_van_kot

HTML

<form method="POST" class="form-horizontal" id="form">
  <fieldset>
    <!-- Form Name -->
    <legend>Form Name</legend>
    <div class="form-group">
      <input type="hidden" value="" id="value" />
      <label class="col-md-4 control-label">Double Button</label>
      <div class="col-md-8">
        <button type="button" onclick="postvalue(1);">click</button>
      </div>
    </div>
    <!-- Select Basic -->
    <div class="form-group">
      <label class="col-md-4 control-label" for="selectbasic">Select Basic</label>
      <div class="col-md-8">
        <select id="selectbasic" name="selectbasic" class="form-control valid">
          <option value="">select option</option>
          <option value="2">Option one</option>
        </select>
      </div>
    </div>
    <!-- Button (Double) -->
    <div class="form-group">
      <label class="col-md-4 control-label">Double Button</label>
      <div class="col-md-8">
        <input type="number" class="valid" />
      </div>
    </div>
    <input type="submit" value="submit" />
  </fieldset>
</form>

JavaScript

$('#form').submit(function(e) { //on form submit event
  var emptyInputs = $(this).find("input, select") //find input and select as I see in your html
    .not('[type="hidden"]') //not hidden
    .filter(function() { //get all empty
      return $(this).val() == "";
    });
  if (emptyInputs.length) { //if any empty
    alert('please fill all fields'); //show message
    e.preventDefault(); //prevent post form
  }
});


function postvalue(id) {
  $('#value').val(id);
}