JSFiddle - React, Tailwind, and code Playground

by pphheerroonn

HTML

<form name="q2Form" action="#" onsubmit="return false">
    <label for="pindigits">Enter password:</label><br>
    <input type="password" name="pindigits" pattern="[0-9]{4}" maxlength="4" title="Please enter the password you were provided."><br>

    <!--<button type="button" onclick="submitForm()">Submit</button>-->
    <input type="submit" value="Submit" onclick="submitForm()">
</form>
<div class="codeResult">
Hello, here is your code: 
<span id="code"> XXX </span>
</div>
<script>
function checkPasscode() {
	var passcode_input = document.querySelector("#passcode");
	
	if (passcode_input.value != "blink24") {
		passcode_input.setCustomValidity("Please enter the password you were provided.");
	} else {
		passcode_input.setCustomValidity("");
		 div = document.getElementsByClassName("codeResult");
    div[0].style.display = "block";
    div[1].style.display = "block";
    div = document.getElementsByID("code").innerHTML = "Inputs are Valid";
	}
}




function submitForm() {
input.oninvalid = function(event) {
    event.target.setCustomValidity('Please enter the password you were provided.');
}


    validateForm();

    
    div = document.getElementsByID("code").innerHTML = "Inputs are Valid";
    
        
    return false;
}

function validateForm() {
  var pin = document.forms["q2Form"]["pindigits"].value;
  var marketingemail = document.forms["q2Form"]["marketingemail"].value;
  var email = document.forms["q2Form"]["email"].value;
  var pet = document.forms["q2Form"]["pet"].value;
  var pin = document.forms["q2Form"]["pindigits"].value;
  if (pet == "other") {
    div = document.getElementsByClassName("codeResult");
    div[0].style.display = "block";
    div[1].style.display = "block";
    div = document.getElementsByID("code").innerHTML = "Inputs are Valid";
    return false;
  }
  
}


</script>

<style>
.codeResult{
    display:none;}
</style>