Question

Here is my App.js

errorMessage=(validator, input, value)=> {
  const valid=validator(value)
  if (value==="") {
    input.nextElementSibling.style.display="inherit"
    return false 
  } else if (!valid && value!=="") {
    input.nextElementSibling.nextElementSibling.style.display="inherit"
    return false 
  }
  return true
}

const checkedCheckboxes=Array.from(checkboxes).filter(checkbox=> checkbox.checked);

validateCheckboxes=()=> {
  const checked=checkedCheckboxes.length;
  if (!checked) {
    fieldSetActivity.nextElementSibling.style.display="block"
    return false 
  }
  return true 
}



validateForm=()=> {
  if (!validateCheckboxes()) {
    return false 
  }
  return true
}

// validateForm=()=> {
//   Array.from(inputElements).forEach(element=> {
//     let value=element.value;
//     let input=element;
//     if (input===name) {
//       errorMessage(isValidName, input, value)
//     } else if (element===email) {
//       errorMessage(isValidEmail, input, value);
//     } else if (element===creditNumber) {
//       errorMessage(isValidCreditCard, input, value);
//     } else if (element===zip) {
//       errorMessage(isValidZipCode, input, value);
//     } else if (element===cvv) {
//       errorMessage(isValidCvv, input, value);
//     } else if (element==fieldSetActivity) {
//       validateCheckboxes()
//     }
//   });
// }


form.addEventListener( submit , validateForm);

我研究了与这一问题类似的答案,并且评论了法典,我意识到了母子的bo子。

因此,我决定测试一种功能,即validateCheck Boxes功能,并采用一种以本人形式提交手递的可行解决办法。但是,尽管检查箱的验证功能恢复不实,但表格仍未提交。

为什么发生这种情况?

Answer 1

http://www.un.org。

你们的法典中有两条内容有待确定。

Returning true/false works if you have an onSubmit=return fun() in your <form> attribute. Since you are using a listener, you need to do event.preventDefault() from the validation function
Your checkedCheckboxes is a const which means it will not be populated dynamically when the checkboxes are checked/unchecked. Move it into your checkbox validation method and make it a local variable using let

在作出这些修改后,你的认证范围如下:

validateCheckboxes=()=> {
// 2. Local variable
let checkedCheckboxes=Array.from(checkboxes).filter(checkbox=> checkbox.checked);
  const checked=checkedCheckboxes.length;
  if (!checked) {
    fieldSetActivity.nextElementSibling.style.display="block"
    return false;
  }
  return true;
}

validateForm=()=> {
  if (!validateCheckboxes()) {
  // 1. preventDefault instead of  false 
     event.preventDefault();
  }
  return;
}

JSFiddle:

OLD ANSWER:

You need to call your JS validation before the form is submitted To do that, use the form s onSubmit attribute like this

<form action="index.html" method="post" onSubmit="return validateForm()">

JSFiddle:

您也可以使用形式活动听众和电话event.preventDefault(),具体载于。

引自该网页:

JS:

function logSubmit(event) {
  log.textContent = `Form Submitted! Time stamp: ${event.timeStamp}`;
  event.preventDefault();
}

const form = document.getElementById( form );
const log = document.getElementById( log );
form.addEventListener( submit , logSubmit);

HTML:

<form id="form">
  <label>Test field: <input type="text"></label>
  <br><br>
  <button type="submit">Submit form</button>
</form>
<p id="log"></p>

友情链接