如何验证表单的部分内容？

huangapple
go评论101阅读模式
英文:

How to validate only parts of a form?

问题

我有一个多步表单，其中包含两个字段集，每个字段集中包含两个必填输入字段。我想在用户想要继续到第二个字段集时仅验证第一个字段集。

然而，根据我的当前方法，整个表单都会被验证，尽管我只在第一个字段集的输入元素上调用了checkValidity()。结果是，当进入第二个字段集时，用户会看到无效的输入字段和警告工具提示。

我做错了什么？如何可以分别验证这两个字段集？我找到了关于jQuery和JSP的方法，但没有找到纯ES6的方法。

以下是我的代码。

  1. let fieldsetElements;
  3. function validateFieldset(step) {
  4.   const inputElements = document.querySelectorAll(`fieldset.active input`);
  5.   return !Array.from(inputElements).find((element) => !element.checkValidity());
  6. }
  8. function goToStep(step) {
  9.   Array.from(fieldsetElements)
  10.     .filter((element) => element.classList.contains("active"))
  11.     .forEach((element) => element.classList.remove("active"));
  12.   fieldsetElements[step - 1].classList.add("active");
  13. }
  15. function continueToStep(nextStep) {
  16.   const currentStep = nextStep - 1;
  17.   const fieldsetValid = validateFieldset(currentStep);
  18.   if (fieldsetValid) {
  19.     goToStep(nextStep);
  20.   }
  21. }
  23. document.addEventListener("DOMContentLoaded", () => {
  24.   fieldsetElements = document.getElementsByTagName("fieldset");
  25.   goToStep(1);
  26. });
  1. fieldset {
  2.   display: none;
  3. }
  4. fieldset.active {
  5.   display: block;
  6. }
  1. <form>
  2.   <fieldset>
  3.     <legend>Your name</legend>
  4.     <p>
  5.       <label for="prename">Prename (required)</label><br />
  6.       <input type="text" id="prename" name="prename" required />
  7.     </p>
  8.     <p>
  9.       <label for="surname">Surname (required)</label><br />
  10.       <input type="text" id="surname" name="surname" required />
  11.     </p>
  12.     <p>
  13.       <button onclick="continueToStep(2)">Continue</button>
  14.     </p>
  15.   </fieldset>
  16.   <fieldset>
  17.     <legend>Your contact information</legend>
  18.     <p>
  19.       <label for="email">Email (required)</label><br />
  20.       <input type="email" id="email" name="email" required />
  21.     </p>
  22.     <p>
  23.       <label for="phone">Phone</label><br />
  24.       <input type="tel" id="phone" name="phone" />
  25.     </p>
  26.     <button onclick="goToStep(1)">Go back</button>
  27.     <button type="submit">Submit</button>
  28.   </fieldset>
  29. </form>
英文:

I have a multistep form with two fieldsets, containing two required inputs each. I want to validate only the first fieldset when the user wants to continue to the second one.

However, with my current approach, the entire form is validated, although I call checkValidity() only on the input elements of the first fieldset. As a result, when progressing to the second fieldset, users are greeted with invalidated input fields and warning tooltips.

What am I doing wrong? How can I validate the fieldsets separately? I've found approaches for jQuery and JSP, but not for plain ES6.

Here is my code.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. let fieldsetElements;
  3. function validateFieldset(step) {
  4.   const inputElements = document.querySelectorAll(`fieldset.active input`);
  5.   return !Array.from(inputElements).find((element) =&gt; !element.checkValidity());
  6. }
  8. function goToStep(step) {
  9.   Array.from(fieldsetElements)
  10.     .filter((element) =&gt; element.classList.contains(&quot;active&quot;))
  11.     .forEach((element) =&gt; element.classList.remove(&quot;active&quot;));
  12.   fieldsetElements[step - 1].classList.add(&quot;active&quot;);
  13. }
  15. function continueToStep(nextStep) {
  16.   const currentStep = nextStep - 1;
  17.   const fieldsetValid = validateFieldset(currentStep);
  18.   if (fieldsetValid) {
  19.     goToStep(nextStep);
  20.   }
  21. }
  23. document.addEventListener(&quot;DOMContentLoaded&quot;, () =&gt; {
  24.   fieldsetElements = document.getElementsByTagName(&quot;fieldset&quot;);
  25.   goToStep(1);
  26. });

<!-- language: lang-css -->

  1. fieldset {
  2.   display: none;
  3. }
  4. fieldset.active {
  5.   display: block;
  6. }

<!-- language: lang-html -->

  1. &lt;form&gt;
  2.   &lt;fieldset&gt;
  3.     &lt;legend&gt;Your name&lt;/legend&gt;
  4.     &lt;p&gt;
  5.       &lt;label for=&quot;prename&quot;&gt;Prename (required)&lt;/label&gt;&lt;br /&gt;
  6.       &lt;input type=&quot;text&quot; id=&quot;prename&quot; name=&quot;prename&quot; required /&gt;
  7.     &lt;/p&gt;
  8.     &lt;p&gt;
  9.       &lt;label for=&quot;surname&quot;&gt;Surname (required)&lt;/label&gt;&lt;br /&gt;
  10.       &lt;input type=&quot;text&quot; id=&quot;surname&quot; name=&quot;surname&quot; required /&gt;
  11.     &lt;/p&gt;
  12.     &lt;p&gt;
  13.       &lt;button onclick=&quot;continueToStep(2)&quot;&gt;Continue&lt;/button&gt;
  14.     &lt;/p&gt;
  15.   &lt;/fieldset&gt;
  16.   &lt;fieldset&gt;
  17.     &lt;legend&gt;Your contact information&lt;/legend&gt;
  18.     &lt;p&gt;
  19.       &lt;label for=&quot;email&quot;&gt;Email (required)&lt;/label&gt;&lt;br /&gt;
  20.       &lt;input type=&quot;email&quot; id=&quot;email&quot; name=&quot;email&quot; required /&gt;
  21.     &lt;/p&gt;
  22.     &lt;p&gt;
  23.       &lt;label for=&quot;phone&quot;&gt;Phone&lt;/label&gt;&lt;br /&gt;
  24.       &lt;input type=&quot;tel&quot; id=&quot;phone&quot; name=&quot;phone&quot; /&gt;
  25.     &lt;/p&gt;
  26.     &lt;button onclick=&quot;goToStep(1)&quot;&gt;Go back&lt;/button&gt;
  27.     &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
  28.   &lt;/fieldset&gt;
  29. &lt;/form&gt;

<!-- end snippet -->

答案1

得分: 1

问题在于没有type属性，所有的button标签都会触发表单验证。请将type="button"添加到你的按钮上，它就会按你的期望工作。

  1. <button type="button" onclick="continueToStep(2)">Continue</button>
  2. <button type="button" onclick="goToStep(1)">Go back</button>
  3. <button type="submit">Submit</button>

请注意，我只翻译了代码部分，没有包含其他内容。

英文:

The issue is that without a type attribute all button tags trigger form validation. Add type=&quot;button&quot; to your buttons and it should work as you expect.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. let fieldsetElements;
  3. function validateFieldset(step) {
  4.   const inputElements = document.querySelectorAll(`fieldset.active input`);
  5.   return !Array.from(inputElements).find((element) =&gt; !element.checkValidity());
  6. }
  8. function goToStep(step) {
  9.   Array.from(fieldsetElements)
  10.     .filter((element) =&gt; element.classList.contains(&quot;active&quot;))
  11.     .forEach((element) =&gt; element.classList.remove(&quot;active&quot;));
  12.   fieldsetElements[step - 1].classList.add(&quot;active&quot;);
  13. }
  15. function continueToStep(nextStep) {
  16.   const currentStep = nextStep - 1;
  17.   const fieldsetValid = validateFieldset(currentStep);
  18.   if (fieldsetValid) {
  19.     goToStep(nextStep);
  20.   }
  21. }
  23. document.addEventListener(&quot;DOMContentLoaded&quot;, () =&gt; {
  24.   fieldsetElements = document.getElementsByTagName(&quot;fieldset&quot;);
  25.   goToStep(1);
  26. });

<!-- language: lang-css -->

  1. fieldset {
  2.   display: none;
  3. }
  4. fieldset.active {
  5.   display: block;
  6. }

<!-- language: lang-html -->

  1. &lt;form&gt;
  2.   &lt;fieldset&gt;
  3.     &lt;legend&gt;Your name&lt;/legend&gt;
  4.     &lt;p&gt;
  5.       &lt;label for=&quot;prename&quot;&gt;Prename (required)&lt;/label&gt;&lt;br /&gt;
  6.       &lt;input type=&quot;text&quot; id=&quot;prename&quot; name=&quot;prename&quot; required /&gt;
  7.     &lt;/p&gt;
  8.     &lt;p&gt;
  9.       &lt;label for=&quot;surname&quot;&gt;Surname (required)&lt;/label&gt;&lt;br /&gt;
  10.       &lt;input type=&quot;text&quot; id=&quot;surname&quot; name=&quot;surname&quot; required /&gt;
  11.     &lt;/p&gt;
  12.     &lt;p&gt;
  13.       &lt;button type=&quot;button&quot; onclick=&quot;continueToStep(2)&quot;&gt;Continue&lt;/button&gt;
  14.     &lt;/p&gt;
  15.   &lt;/fieldset&gt;
  16.   &lt;fieldset&gt;
  17.     &lt;legend&gt;Your contact information&lt;/legend&gt;
  18.     &lt;p&gt;
  19.       &lt;label for=&quot;email&quot;&gt;Email (required)&lt;/label&gt;&lt;br /&gt;
  20.       &lt;input type=&quot;email&quot; id=&quot;email&quot; name=&quot;email&quot; required /&gt;
  21.     &lt;/p&gt;
  22.     &lt;p&gt;
  23.       &lt;label for=&quot;phone&quot;&gt;Phone&lt;/label&gt;&lt;br /&gt;
  24.       &lt;input type=&quot;tel&quot; id=&quot;phone&quot; name=&quot;phone&quot; /&gt;
  25.     &lt;/p&gt;
  26.     &lt;button  type=&quot;button&quot; onclick=&quot;goToStep(1)&quot;&gt;Go back&lt;/button&gt;
  27.     &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
  28.   &lt;/fieldset&gt;
  29. &lt;/form&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年3月7日 01:12:59
  • 转载请务必保留本文链接：https://go.coder-hub.com/75653830.html
  • forms
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定