JSFiddle - React, Tailwind, and code Playground

by Hui Zhen

HTML

<form name="myForm" action="ControllerServlet" onsubmit="return validateForm()" method="post">
  <table>

    <tr>
      <td class="newusertd">Name:<span class="price">*</span></td>
      <td class="newusertd">
        <input style="color: black;" type="text" name="name" class="Btn">
      </td>
    </tr>
    <tr>
      <td class="newusertd">Contact Number:<span class="price">*</span></td>
      <td class="newusertd">
        <input style="color: black;" type="text" name="phone" placeholder="98989898" class="Btn">
      </td>
    </tr>
    <tr>
      <td class="newusertd">Email:<span class="price">*<br></span></td>
      <td class="newusertd">
        <input style="color: black;" type="text" name="email" placeholder="xxx@hello.com" class="Btn">
      </td>
    </tr>
    <tr>
      <td class="newusertd">Address:<span class="price">*</span></td>
      <td class="newusertd">
        <input style="color: black;" type="text" name="address" class="Btn">
      </td>
    </tr>
    <tr>
      <td class="newusertd">Password:<span class="price">*</span>
        <br>(8-16 Characters with
        <br>one UPPERCASE & numbers)</td>
      <td class="newusertd">
        <input style="color: black;" type="password" name="password" class="Btn">
    </tr>
    <tr>
      <td class="newusertd"></td>
      <td class="newusertd">
        <input style="color: black;" type="submit" value="Create Account" class="Btn" />
      </td>
    </tr>

  </table>
</form>

JavaScript

function validateForm() {
  var name = document.forms["myForm"]["name"].value;
  var phone = document.forms["myForm"]["phone"].value;
  var email = document.forms["myForm"]["email"].value;
  var add = document.forms["myForm"]["address"].value;
  var passwd = document.forms["myForm"]["password"].value;
  var matchesCount = email.split("@").length - 1;
  var matchesCount2 = email.split(".").length - 1;
  var error = "";
  if (name == '' || phone == '' || email == '' || add == '' || passwd == '') {
    error += "All must be filled out \n"
  } else {
    if (phone.search(/^[0-9]*$/) == -1 || phone.length != 8) {
      error += "- Phone number can only contain digits \n";
    }
    if (passwd.search(/[A-Z]/) == -1) {
      error += "- Password needs to be have one UPPERCASE\n";
    }
    
    if(passwd.search(/[a-z]/) == -1){
    	error += "- Password needs to be have letters\n";
    }
    
    if(passwd.search(/[0-9]/) == -1){
    	error += "- Password needs to be have numbers\n";
    }

    if (passwd.length < 8 || passwd.length > 16) {
      error += "- Password contain only 8-16 digits \n";
    }

    if (matchesCount > 1 || matchesCount2 < 1) {
      error += "- Please enter a valid email \n";
    }
  }
  alert(error);
  return false;
}