JSFiddle - React, Tailwind, and code Playground

by masteram

HTML

<form action="#" method="post" name="signup">
    <input type="text" name="address" id="address" value="Enter email address" size="30" />
    <input type="submit" name="submit" value="Signup" />
    <div id="msg"></div>
</form>

JavaScript

$$('form[name=signup]').addEvent('submit', function (e) {
      //Prevent the submit event
      new Event(e).stop();
      var address = $('address').value;
      // check email using regex
      var address_regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
      if (!address_regex.test(address)) {
          $('msg').innerHTML = 'Please enter a valid email address.';
          return;
      }
      new Ajax('index.php?option=com_traincomponent&task=adduser&template=raw', {
          method: 'get',
          data: {
              'address': address
          },
          onRequest: function () {
              $('msg').innerHTML = 'Please wait...';
          },
          onComplete: function (response) {
              if (response != '') $('msg').innerHTML = response;
              else msg.html('Please enter your email address.');
          }
      }).request();
  });