JSFiddle - React, Tailwind, and code Playground

by Bianca Kuehweidner

HTML

<form id="form__Login" action="#" method="post">
    <label> Part number:
    <input pattern="[0-9][a-zA-Z]{3}" name="part" title="A part number is a digit followed by three letters."/>
    </label>
    <button id="btnSubmit">submit</button>
</form>

<div id="box__content" class="box"></div>
<div id="box__login" class="box"></div>

CSS

.box { 
  border: solid 1px #000; 
  width: 200px;
  height: 200px;
}

#box__login {
  display: inline-block;
  background-color: green;  
}

#box__content {
  display: none;
  background-color: blue;
}

JavaScript

$("#btnSubmit").on("click", function () {
    validateLogin();
});


function validateLogin(event) {
    
    if ($('#form__Login')[0].checkValidity() == false) {
        event.preventDefault();
    } else {
        successfulLogin();
    }
}


/* LOGIN SUCCESSFUL, CHANGE CONTENT                  */
/* ************************************************** */
function successfulLogin() {

    $("#box__content").fadeIn("slow");
    $("#box__login").fadeOut("slow");
    
}