JSFiddle - React, Tailwind, and code Playground

by Matt Jennings

HTML

<h1>Sign Up for Newsletter</h1>
  <div id="my-form" class="show">
    <form id="myCaptchaForm" method="post">
      <p>
        <label for="email">Email address:</label><br />
        <input type="text" id="email" />
      </p>
      <p>
         <label for="captcha">Are you human? What is <span id="captcha-answer"></span>?</label><br />
         <input type="number" id="captcha-answer" />
      </p>
      <p id="email-error" class="hide error">
        Please enter a valid email address.
      </p>
      <p id="captcha-error" class="hide error">
        Please answer the question correctly.
      </p>
      <p>
        <input type="submit" value="Submit" />
      </p>
    </form>
  </div>
  
  <div id="my-success-msg" class="hide">
  You have successfully submitted the form!
  </div>

CSS

.hide {
  display: none;
}

.show {
  display: block;
}

.error {
  color: red;
}

JavaScript

$('#myCaptchaForm').submit(function(e) {
	if( $('#email').val() === '' || $('#email').val().length > 4 ) {
  	$('#email-error').removeClass('hide').addClass('show');
  }
  e.preventDefault();
});