Javascript function Checkform not showing my alert message

Question

Actually working on a little one pager and need to verify that the form is properly filled before inserting the data in the database. The function works fine it does prevent the user from submitting when fields are empty, the only problem is that the error text that show up isn't the one I wrote in my code. Probably the default alert text showing and not mine for some reason. For your information I am currently using a bootstrap template with some php and javascript it is pretty basic. If anyone could point me in the good direction would be much appreciated.

Here is the script in the head of the html page:

<script type="text/javascript">

    function checkForm(form)
    {
        ...
        if(!form.terms.checked) {
            alert("Veuillez indiquer que vous acceptez de recevoir des offres promotionnelles");
            form.terms.focus();
        return false;
        }
        if(form.email.value == 0) {
            alert("Veuillez remplir le courriel");
            form.email.focus();
        return false;
        }
        if(form.fname.value == 0) {
            alert("Veuillez remplir votre prénom");
            form.fname.focus();
        return false;
        }
        if(form.lname.value == 0) {
            alert("Veuillez remplir votre nom");
            form.lname.focus();
        return false;
        }
    return true;
    }

    </script>

Here is the Html :

    <?php include 'send_post.php';?>
    <form method="post" action="send_post.php" onsubmit="return checkForm(this)">
    <div class="row">
      <div class="col-lg-3 col-md-6 text-center">
        <div class="service-box">
          <i class="fa fa-4x fa-pencil text-primary sr-icons"></i>
          <h3>Prénom</h3>
          <input type="text" class="form-control" id="fname" name="fname" required="">
        </div>
      </div>
      <div class="col-lg-3 col-md-6 text-center">
        <div class="service-box">
          <i class="fa fa-4x fa-pencil text-primary sr-icons"></i>
          <h3>Nom</h3>
          <input type="text" class="form-control" id="lname" name="lname" required="">
        </div>
      </div>
      <div class="col-lg-3 col-md-6 text-center">
        <div class="service-box">
          <i class="fa fa-4x fa-envelope text-primary sr-icons"></i>
          <h3>Courriel</h3>
          <input type="email" class="form-control" id="email" name="email" required="">
        </div>
      </div>
      <div class="col-lg-3 col-md-6 text-center">
        <div class="service-box">
          <i class="fa fa-4x fa-globe text-primary sr-icons"></i>
          <h3>Montagne</h3>
            <select class="form-control" id="mont" name="mont" required="">
            <option>Valinouet</option>

                <option>Mont Bélu</option>
    </select>
        </div>
      </div>
    </div>
    <div class="row">
    <div class="col-lg-10 style="margin-right:100px;padding-bottom:10px;>
        <br>
        <div class="checkbox">  
            <input type="checkbox" name="terms" value="check" id="terms" required=""/> J'accepte de recevoir des offres promotionnelles par e-mail, en cochant la case prévue à cet effet
        </div>
    </div>  
    </div>
    <div class="row">
        <div class="col-lg-12 text-center">
            <button class="btn btn-primary btn-lg" type="submit" value="Submit" name="submit">Soumettre</button>
        </div>  
    </div>
  </form>

Thanks a lot for your time.

Answer 1

This is happening because you have used 'required' attribute in the html code which by default is triggered before the onsubmit() call