JSFiddle - React, Tailwind, and code Playground

by NickU

HTML

<form>
<div class="row">
  <label for="realname">Name<span class="required">*</span></label>
  <input type="text" name="realname" id="realname" required/>
  </div>

  <div class="row">
    <label for="company">Company</label>
    <input type="text" name="company" id="company"/>
  </div>

  <div class="row">
    <label for="email">Email<span class="required">*</span></label>
    <input type="email" name="email" id="email" required/>
  </div>

  <div class="row">
    <label for="phone">Phone<span class="required">*</span></label>
    <input type="tel" name="phone" id="phone" required/>
  </div>

  <div class="row">
    <input type="submit" value="SUBMIT">
  </div>
  </form>

JavaScript

$(function() {
  const selector = 'input[required]';
  const allInput = $(selector);
  const submit = $('input[type="submit"]');

  $(document).on('change', selector, function() {
    const counterGood = allInput.filter(function() {
      return this.value !== '';
    }).length;
    
    submit.prop('disabled', counterGood !== allInput.length);
  });
  
  $('form').on('submit', function(e) {
    if (submit.prop('disabled')) {
      console.log('nope');
      e.preventDefault();
      return;
    }
    
    console.log('submit is Ok');
  });

  allInput.eq(0).trigger('change');
});