Setting a limit for checkbox in js

I’m trying to make a form that sets a limit for 3 selection max or 1 minimum for my checkbox. I do get the error message once the condition isn’t set but I still can check them. How can I prevent that? and how can I prevent it from submitting the form when it happens?

This is my JavaScript code

function Calculate() {
    var a = document.getElementsByName("vehicle");
    var n = 0;
    var count;
    for (count = 1; count < a.length; count++) {
        if (a[count].checked === true) {
            n = n + 1;
        }
    }
    if (n > 4 || n == 0) {
        document.getElementById('er').innerHTML =
            'Please Select atleast one car or 3 at most ';
        sp.style.visibility = 'visible';

        return false;
    }
}

this is my html code structure:

  <p class="Form-description">
    Please Fill The Form Carefully
  </p>
</div>

<form name="Drive-form"  onsubmit="val()" method="GET" action="success.html" >
  <div class="form-control">
    <label>Full Name</label>
    <input name="name" type="text"
      placeholder="First and Last Name" />
    <div class="error hide">Name is required</div>
  </div>

 

  <div class="form-control">
    <label>Phone</label>
    <input name="phone" type="text"
    ></input>
    <div class="error hide">Phone is invalid</div>
  </div>

 
  <div class="form-control">
   
    <p>Please select your preferred contact method:</p>
    <div>
      <input type="radio" id="Choice1"
       name="age" value="18-25">
      <label for="Choice1">18-25</label>
  
      <input type="radio" id="Choice2"
       name="age" value="25-30">
      <label for="Choice2">25-30</label>
  
      <input type="radio" id="Choice3"
       name="age" value="30>">
      <label for="Choice3">30></label>
    </div>
    <div>

  </div>
  <br>

  <div class="form-control">
   
    <p>Please select at least 3 cars:</p> <br>

        <input type="checkbox" id="vehicle" name="vehicle" value="Mazda" onclick= " Calculate();">
 <label for="vehicle1"> Mazda </label><br>
 <input type="checkbox" id="vehicle2" name="vehicle" value="Honda" onclick= " Calculate();" >
 <label for="vehicle2"> Honda </label><br>
 <input type="checkbox" id="vehicle3" name="vehicle" value="BMW" onclick= " Calculate(); ">
 <label for="vehicle3"> BMW</label><br>
 <input type="checkbox" id="vehicle4" name="vehicle" value="Toyota" onclick= " Calculate(); ">
 <label for="vehicle4"> Toyota </label><br>
 <input type="checkbox" id="vehicle5" name="vehicle" value="Jeep" onclick= " Calculate(); ">
 <label for="vehicle5"> Jeep </label><br>
 <input type="checkbox" id="vehicle6" name="vehicle" value="GMC" onclick= " Calculate(); ">
 <label for="vehicle6"> GMC </label><br> 

<span id="er"></span> 
      </div>



      <hr />

      <button type="submit">SUBMIT FORM</button>
      <button type="reset">RESET FORM</button>
    </form>

Answer

The fixed code:

function Calculate(){ 
    var a = document.getElementsByName("vehicle");
    var n = 0;
    var count;
    for(count=0; count<a.length;count++){
if(a[count].checked===true){
n=n+1;

}

    }
    if(n > 3||n==0){
    event.preventDefault();
document.getElementById('er').innerHTML='Please Select atleast one car or 3 at most ';


return false;

    }
    
};

<form >
<input type = "checkbox" name = "vehicle">
<input type = "checkbox" name = "vehicle">
<input type = "checkbox" name = "vehicle">
<input type = "checkbox" name = "vehicle">
<input type  = "submit" value = "Submit "onclick = "Calculate()">

</form>
<p id = "er">

</p>

if()s

First, the count = 1 should be count = 0 because it will stop at 1 less than the total number of checks.

n > ?

First, if you want it to be min: 1 and max:3, first you need n < or = to 3 so if not it has to be n > 3 instead of n > 4

document.getElementById()

That is where it should be. But if you want it to send to server, then put in there event.preventDefault(); because it prevents the server from submitting it when you don’t want it to.