javascript - 用于 PDF 表单验证的 Javascript

Question

代码工作正常。我想添加一个选项，从 7 个复选框中选择至少一个。我不知道该怎么做。

var emptyFields = [];
for (var i = 0; i < this.numFields; i++) {
  var f = this.getField(this.getNthFieldName(i));
  if (f.type != "button" && f.required) {
    if ((f.type == "text" && f.value == "") || (f.type == "checkbox" && f.value == "Off") || (f.type == "signature" && f.value == "")) emptyFields.push(f.name);
  }
}
if (emptyFields.length > 0) {
  app.alert("Error! Please fill all red highlighted fields")
} else {
  print();
}

标签： javascriptformsvalidation

Answer 1

你只需要改变你那里的逻辑：

• 创建一个新数组checkedCheckboxes。
• 将元素存储在那里f.type === "checkbox" && f.checked === true。
• 最后，检查是否checkedCheckboxes.length === 0并显示适当的错误消息，就像您使用emptyFields.

编辑：工作示例：

// Get a reference to the error box:
const errorBox = document.getElementById('errorBox');

// To the validate button:
const validateButton = document.getElementById('validateButton');

// And to all input elements:
const inputs = document.querySelectorAll('input');

function validateForm() {
  // Reset the error box:
  errorBox.innerHTML = '';

  // Here we'll keep track of empty text inputs:
  const emptyFields = [];

  // And here we'll keep track of how many selected checkboxes each
  // group has:
  const checkedCheckboxesByGroup = {
    checkboxes: 0,
    checkboxes2: 0,
  };

  Array.from(inputs).map((input) => {
    if (input.type === "text" && input.value === "") {
      // Keep track of empty inputs:
      emptyFields.push(input);
    }

    if (input.type === "checkbox" && input.checked) {
      // Get the checkbox group (name attribute without the
      // square brackets):
      const groupName = input.name.slice(0, -2);

      // Increment this counter:
      ++checkedCheckboxesByGroup[groupName];
    }
  });



  if (emptyFields.length > 0) {
    errorBox.innerHTML += "<p>All fields are required.</p>";
  }
  
  Object.entries(checkedCheckboxesByGroup).map(([groupName, checkedCheckboxes]) => {
    if (checkedCheckboxes === 0)
      errorBox.innerHTML += `<p>You need to select at least one element in ${ groupName }.</p>`;
  });
}

// Validate the form every time we click the button:
validateButton.addEventListener('click', validateForm);

body,
input,
button {
  font-family: monospace;
}

p {
  margin: 0;
}

.label {
  display: block;
  border: 0;
  margin: 0 0 16px;
  padding: 0;
}

.labelTitle {
  display: block;
  margin-bottom: 4px;
}

input[type="text"],
button {
  border: 2px solid black;
  padding: 8px;
  border-radius: 2px;
  background: white;
}

.checkboxLabel {
  display: block;
  position: relative;
  padding: 8px 8px 8px 32px;
}

input[type="checkbox"] {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translate(-50%, -50%);
  margin: 0;
}

#errorBox {
  border: 2px solid red;
  padding: 8px;
  border-radius: 2px;
  margin-bottom: 16px;
}

#errorBox > p + p {
  margin-top: 16px;
}

#errorBox:empty {
  display: none;
}

<label class="label">
  <span class="labelTitle">Field 1</span>
  <input type="text" placeholder="Field 1" />
</label>

<label class="label">
  <span class="labelTitle">Field 1</span>
  <input type="text" placeholder="Field 1" />
</label>

<label class="label">
  <span class="labelTitle">Field 1</span>
  <input type="text" placeholder="Field 1" />
</label>

<fieldset class="label">
  <span class="labelTitle">Checkboxes Group 1</span>
  
  <label class="checkboxLabel"><input type="checkbox" value="1" name="checkboxes[]" />Checkbox 1</label>
  <label class="checkboxLabel"><input type="checkbox" value="2" name="checkboxes[]" />Checkbox 2</label>
  <label class="checkboxLabel"><input type="checkbox" value="3" name="checkboxes[]" />Checkbox 3</label>
  <label class="checkboxLabel"><input type="checkbox" value="4" name="checkboxes[]" />Checkbox 4</label>
  <label class="checkboxLabel"><input type="checkbox" value="5" name="checkboxes[]" />Checkbox 5</label>
  <label class="checkboxLabel"><input type="checkbox" value="6" name="checkboxes[]" />Checkbox 6</label>
  <label class="checkboxLabel"><input type="checkbox" value="7" name="checkboxes[]" />Checkbox 7</label>
</fieldset>


<fieldset class="label">
  <span class="labelTitle">Checkboxes Group 2</span>
  
  <label class="checkboxLabel"><input type="checkbox" value="10" name="checkboxes2[]" />Checkbox 10</label>
  <label class="checkboxLabel"><input type="checkbox" value="20" name="checkboxes2[]" />Checkbox 20</label>
  <label class="checkboxLabel"><input type="checkbox" value="30" name="checkboxes2[]" />Checkbox 30</label>
  <label class="checkboxLabel"><input type="checkbox" value="40" name="checkboxes2[]" />Checkbox 40</label>
  <label class="checkboxLabel"><input type="checkbox" value="50" name="checkboxes2[]" />Checkbox 50</label>
  <label class="checkboxLabel"><input type="checkbox" value="60" name="checkboxes2[]" />Checkbox 60</label>
  <label class="checkboxLabel"><input type="checkbox" value="70" name="checkboxes2[]" />Checkbox 70</label>
</fieldset>

<div id="errorBox"></div>

<button id="validateButton">Validate Form</button>