如何在多步骤表单中填写输入字段后激活按钮？

Question

<form class="container" style="margin: 30px;">
        <input type="text" class="first-name" placeholder="first name">
        <input type="text" class="first-name" placeholder="last name">
        <button type="button">next</button>
    </form>
    <form class="container" style="margin: 30px;">
        <input type="radio" id="age1" name="age" value="30">
        <label for="age1">0 - 30</label><br>
        <input type="radio" id="age2" name="age" value="60">
        <label for="age2">31 - 60</label><br>
        <input type="radio" id="age3" name="age" value="100">
        <label for="age3">61 - 100</label><br><br>
        <input type="submit" value="Submit">
    </form>

我正在创建一个多步骤表单，并希望“下一步”和“提交”按钮仅在填写或选择输入字段时处于活动状态。你能帮我写出正确的 JS 代码吗？

Answer 1

使用

.value

检查是否被拒绝，如果被拒绝，设置

button.disable=true

，否则

button.disable=false

。如果是radio input，可以用

input.check

查看输入是否被选中

Answer 2

您可以尝试这样的方法 - 请查看整个代码中的注释以指示该阶段发生的情况。

/*
  delegated "change" event handler
  to process changes made within forms
*/
document.addEventListener('change',e=>{
  if( e.target instanceof HTMLInputElement ){
    /*
      set a boolean that is used to determine if the button can be enabled.
      find the parent form and identify the button.
    */
    let valid=true;
    let form=e.target.closest('form');
    let bttn=form.querySelector('button');
    
    /*
      iterate through inputs ( note this might need to be modified if you have textarea etc )
      if any input is empty, change boolean to false and end processing.
      if all inputs are completed - proceed to enable button
    */
    let col=[ ...form.querySelectorAll('input') ];
        col.some(n=>{
          if( n.value=='' ){
            valid=false;
            return true
          }
        });
    if( valid && bttn )bttn.disabled=false;
  }
});

/*
  delegated "click" handler to process form button clicks
*/
document.addEventListener('click',e=>{
  if( e.target instanceof HTMLButtonElement ){
    /*
      Find the parent form
    */
    let form=e.target.closest('form');
    /*
      Find ALL the forms in multi-stage process
      and deduce the number of them.
    */
    col=[ ...document.querySelectorAll('form.container') ];
    let total=col.length - 1;
    
    /*
      Iterate through forms collection
      if it is NOT the final form, enable the next form and hide present
    */
    col.some((n,index)=>{
      if( n===form && index!=total ){
        col[ index + 1 ].classList.remove('hidden');
        form.classList.add('hidden');
        return true
      }
    });
  }
});

.hidden{display:none}
form.container{margin: 30px;}
label{display:block}
label:last-of-type{margin:0 0 2rem 0;}

<form class="container">
  <input type="text" class="first-name" placeholder="first name">
  <input type="text" class="first-name" placeholder="last name">
  <button type="button" disabled>next</button>
</form>

<form class="container hidden">
  <input type="text" name="gender" placeholder="teapot">
  <input type="text" name="iq" placeholder="2">
  <button type="button" disabled>next</button>
</form>

<form class="container hidden">
  <input type="text" name="colour" placeholder="green">
  <input type="text" name="size" placeholder="wheelbarrow">
  <button type="button" disabled>next</button>
</form>


<form class="container hidden">
  <label><input type="radio" name="age" value="30">0 - 30</label>
  <label><input type="radio" name="age" value="60">31 - 60</label>
  <label><input type="radio" name="age" value="100">61 - 100</label>
  <input type="submit" />
</form>