JSFiddle - React, Tailwind, and code Playground

by calder12

HTML

<input type="email" class="homepage"  name="user_email2" id="user_email2" placeholder="Email" maxlength="50" required />
        <div class ="errormsg" id ="errormsg6"></div>
        <input type="password" class="homepage"  name="user_password2" id="user_password2" placeholder="Password" maxlength="20" required />
        <div class ="errormsg" id ="errormsg7"></div>
        <input type="submit" name="login" id="login" value="Submit">
        <div class ="errormsglast" id ="errormsg8"></div>

JavaScript

$(document).ready(function() {
  /* ----------------- Login Validations Global Variables -----------------   */
  var user_email2 = "";
  var user_emailajax2 = "";
  var user_password2 = "";
  var user_passwordajax2 = "";
  var emailformat = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);
  /* ----------------- Define Validate Email */
  var validate_email_login = function() { 
    var email = $("#user_email2").val().toLowerCase();
	  var errors = [];
      
    if (email.length < 6 || email.length > 50) {
        errors.push("Email : 6 - 50 Characters<br>");
    } 

    if (!emailformat.test(email)) {
      errors.push("Wrong Email Format");
    } 
    if( errors.length > 0 ) {
      $("#errormsg6").html(errors);
      return false;
    }
    $("#errormsg6").html();
    validate_password_login();
  }

  /* ----------------- Define Validate Password */
  var validate_password_login = function() {
    var item6 = $("#user_password2").val();

    if (item6.length < 8 || item6.length > 20) {
        $("#errormsg7").html("Password : 8-20 Characters");
        return false;
    }
    $("#errormsg7").html("");
    submitForm();
  }
  
  var submitForm = function() {
  	alert("Submitting form");
  }


  /* ----------------- Stop on Submit */
  $("#login").on('click', function() {
	  var errors = [];
    if(validate_email_login() == true) {
    	alert("hi");
    }
  });
});