JSFiddle - React, Tailwind, and code Playground

by stevenkaspar

HTML

<!-- using your format -->
<form id="ffform" method="get" action="/"
onsubmit="CheckFormPrac(event)" >
<fieldset>
         Home Phone:
    <input type="text" name="phone" id="phone" size=15 onblur="CheckFormPrac(this);" /> <br/>

    What is your favorite destination to fly to?
    <input type="text" name="dest" id="dest" size=30 onblur="CheckFormPrac(this);"/> <br/>
    <input type="submit" value="Submit" />
    <input type="reset" value="Reset"/>
    </fieldset>
</form>
<script>function CheckFormPrac(event){
  var pcheck = document.getElementById("phone").value;
  pattern = /(02)[0-9]{8}/;

  if (!pcheck.match(pattern))  {
    event.preventDefault();
    alert("Please input your number in format of 02########.");
  }

  var cdest = document.getElementById("dest").value;
  if (cdest == ""){
    event.preventDefault();
    alert("Destination has not been filled.");
  }

}</script>

<br/><br/><br/>
<span>another way to do it without JS</span>
<form method="get" action="/">
    Home Phone:
    <input type="text" name="phone" pattern='(02)[0-9]{8}' required/> <br/>

    What is your favorite destination to fly to?
    <input type="text" name="dest" required/> <br/>
    <input type="submit" value="Submit" />
    <input type="reset" value="Reset"/>
</form>