Submit HTML Form to firestore with Validation without a action

Question

There is many Q&A Regarding this but none does what I need. What I need is to run saveData() function when I click the submit button if the form is validated. What I don't understand is it does not run the saveData() function, it just Reloads the page if form is validated. If i change

<input type="submit" class="btn btn-primary" value="Submit" style="margin-left: 250px;" />

to

<input type="button" class="btn btn-primary" value="Submit" style="margin-left: 250px;" onclick="saveData(); />

it works fine but without form validation.

What makes this happen.

Sample Code :

>

   <script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-app.js"></script>
 <script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-firestore.js"></script>


  <form  class="form-horizontal" id="patinfo" onsubmit="saveData(); return null;"  >
    <fieldset>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-2 control-label" for="name">Name</label>  
  <div class="col-md-6">
  <input id="name" name="name" type="text" placeholder="" class="form-control input-md" required="" >

  </div>
</div>
<!-- Text input-->
<div class="form-group">
  <label class="col-md-2 control-label" for="name">Patient ID</label>  
  <div class="col-md-6">
  <input id="patientid" name="name" type="number" placeholder="" class="form-control input-md" required=""   min="2" max="300">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-2 control-label" for="pct">PCT</label>
  <div class="col-md-4">
    <div class="input-group">
      <input id="pct" name="pct" class="form-control" placeholder="" type="number"  required="" >
      <span class="input-group-addon">%</span>
    </div>

  </div>
</div>

<!-- Button -->
<br>
</fieldset>
 <input type="submit" class="btn btn-primary" value="Submit" style="margin-left: 250px;" /><br>
</form>
<br>


<script>  


  var firebaseConfig = {
    apiKey: "AIzaSyAqhIEYbN_thWcBxBo_4ALkvMZ83gV_HMg",
    authDomain: "icu-management-system.firebaseapp.com",
    databaseURL: "https://icu-management-system.firebaseio.com",
    projectId: "icu-management-system",
    storageBucket: "icu-management-system.appspot.com",
    messagingSenderId: "108898160234",
    appId: "1:108898160234:web:650c50a75ae16cd8360413",
    measurementId: "G-V82DT69PKJ"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  const db = firebase.firestore();


function saveData (){


  var name = document.getElementById('name').value;
  var patientid = document.getElementById('patientid').value;
  var pct = document.getElementById('pct').value;




  db.collection("Form 04").doc().set({

  name: name,
  patientid:patientid,
  pct:pct,


}).then(function () {

      console.log("Patient Info Updated :");

      }).catch(function (error) {
          console.error("Error ", error);

      });

  } 



</script>


</body>
</html>