JSFiddle - React, Tailwind, and code Playground

by calder12

HTML

<form id="testForm">
<input type="text" id="phone" />
<input type="submit" id="submit"/>
<div class="error"></div>

<div id="foo">
Click me to populate error!
</div>

<div id="bar">
Click me to clear error!
</div>
</form>

CSS

div {
  margin: 20px;
  cursor: pointer;
}

JavaScript

$("#testForm").on("submit", function(){
	if(!$.trim($(".error").html()).length) {
  	$(".error").html("Yay! On a normal form this would submit");
    
    //Remove the return false and uncomment the .submit line in your code.
    return false;
    //Uncomment the line below to actually fire the submission
  	//$("#testForm").submit();
  } else {
  // For testing, do not include
  	$(".error").html("We told you that phone number was wrong!");
  	return false;
  }
})

$("#foo").on("click", function() {
	$(".error").html("Phone Number is wrong");
})


$("#bar").on("click", function() {
	$(".error").html("");
})