JSFiddle - React, Tailwind, and code Playground

by jamdevgirl

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<form action='' method='POST' id="theForm">
<div class="validate"><span style="color: red;"><b>Phone and Email Matches!</b></span></div>

  <input type="phone" name='phone' required='' id="phone" placeholder="0000-000-0000" />
  <br/><br/>
    <input type="email" name='email' required='' id="email" placeholder="hello@youremail.com" />

  <br/><br/>
<div class="validate">
  <button href='/' type='submit' id="submitForm">Submit</button>
</div>
</form>

JavaScript

$('.validate').hide();

$('#phone, #email').on('change', function() {
  let phone = $('#phone').val();
  let email = $('#email').val();
  if (isDataInUse(phone, email)) {
    $(".validate").show();
  } else {
  
  if(phone.trim().length > 0 && email.trim().length > 0) {
   alert ("Phone or Email do not match!\nYou cannot submit this form!");
  }
    $(".validate").hide();
  }
});

$('#theForm').on('submit', function(e) {
  let phone = $('#phone').val();
  let email = $('#email').val();
  if (isDataInUse(phone, email)) {
    // validation failed. cancel the event
    console.log("not submitting");
    e.preventDefault();
    return false;
  }
})

function isDataInUse(phone, email) {
  return (phone === "1234" && email === "1234@gmail.com")
}