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-newsletter">Email address:</label><br />
        <input type="text" id="email-newsletter" />
      </p>
      <p id="email-error" class="hide error">
        Please enter a valid email address.
      </p>
      <p>
         <label for="captcha-answer">Are you human? What is <span id="captcha-question"></span> (number answer only)?</label><br />
         <input type="text" id="captcha-answer" />
      </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

function jsCaptcha() {

  function validateEmail(email) {
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
  }

  var myAnswers = [
    ['three', 'four', 7],
    ['two', 'six', 8],
    ['five', 'one', 6]
  ];

  var myAnswersArrayElem = Math.floor(Math.random() * myAnswers.length);
 
  $('#captcha-question').html(myAnswers[myAnswersArrayElem][0] + ' plus ' + myAnswers[myAnswersArrayElem][1]);


  $('#myCaptchaForm').on('submit', function(e) {
    e.preventDefault();
    var emailText = $('#email-newsletter').val();
    var captchaText = $('#captcha-answer').val();


    if( !validateEmail(emailText) ) {
      $('#email-error').removeClass('hide').addClass('show');
      alert(myAnswers[myAnswersArrayElem][2]);
    }
    else if(captchaText !== myAnswers[myAnswersArrayElem][2]) {
      $('#captcha-error').removeClass('hide').addClass('show');  	
    }
    else if( captchaText === myAnswers[myAnswersArrayElem][2] ){
      $('#my-form').removeClass('show').addClass('hide');
      $('#my-success-msg').removeClass('hide').addClass('show');
    }
    
    return false;

  });

  }

jsCaptcha();