在js中設定復選框的限制

我正在嘗試制作一個表格，為我的復選框設定最大 3 個選擇或最小 1 個選擇的限制。一旦條件未設定，我確實會收到錯誤訊息，但我仍然可以檢查它們。我怎樣才能防止這種情況？以及如何防止它在發生時提交表單？

這是我的 JavaScript 代碼

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;
    }
}

這是我的html代碼結構：

  <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>

uj5u.com熱心網友回復：

固定代碼：

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

首先，count = 1應該是count = 0因為它會在比檢查總數少 1 處停止。

n > ?

首先，如果你希望它是 min: 1 和 max:3，首先你需要 n < 或 = 到 3 所以如果不是它必須是n > 3而不是n > 4

document.getElementById()

那是它應該在的地方。但是如果你想讓它發送到服務器，那么就放在那里，event.preventDefault();因為它會阻止服務器在你不想要它的時候提交它。

uj5u.com熱心網友回復：

我建議您檢查元素的change事件，以在每次進行選擇時form檢查專案總數。checked在處理函式中，您可以驗證正確的選擇數量并確定是否禁用按鈕并禁止提交。

請參閱下面的代碼片段。

const form = document.querySelector('form.pet-form');
const fields = form.querySelectorAll('input');
const button = form.querySelector('button.submit');
const msg = form.querySelector('.message');

form.addEventListener('change', validateForm);
form.addEventListener('submit', handleSubmit);

function validateForm() {
  let boxCount = 0;
  fields.forEach(field => field.checked ? boxCount   : null);
  if (boxCount > 3 || boxCount <1) { 
    msg.innerText = "Please select 1–3 animals.";
    msg.style.backgroundColor = '#FFE0E0'
    button.disabled = true;
  } else {
    msg.innerText = "Ready to submit!";
    button.disabled = false;
    msg.style.backgroundColor = '#E0E0E0'
  }
}

function handleSubmit(e) {
  e.preventDefault(); // prevent page reload;
  alert('Submitted the form'); // do what you need to do to submit
}

label {
  cursor: pointer;
}

button {
  padding: 1em 2em;
}

.message {
  padding: 1em;
  background: #FFE0E0;
  margin: 1em 0;
}

<form class="pet-form">
  <div class="fields">
    <h2>Choose your pets</h2>
    <label for="dog">
      <input type="checkbox" id="dog" name="pet">
        Dog
      </label>
    <label for="cat">
      <input type="checkbox" id="cat" name="pet">
        Cat
      </label>
    <label for="duck">
      <input type="checkbox" id="duck" name="pet">
        Duck
      </label>
    <label for="moose">
      <input type="checkbox" id="moose" name="pet">
        Moose
      </label>
    <label for="dragon">
      <input type="checkbox" id="dragon" name="pet">
        Dragon
      </label>
  </div>
  <div class="message">Please select 1–3 animals.</div>
  <div class="button-wrapper">
    <button class="submit" disabled>Submit</button>
  </div>
</form>

標籤：javascript html

上一篇：如何將上傳的影像保存在任何特定檔案夾中

下一篇：如何測驗/驗證賽普拉斯中某個部分的標題層次結構？