javascript - 验证输入而不是在填写完成后关闭 div

Question

我真的是 HTML、JavaScript 的新手，我只是想知道如何检查我的 fieldset 中的输入字段是否由用户完成，如果是的话，fieldset 折叠成它的图例。下面我创建了将 fieldset 折叠到图例中的脚本，我只需要创建验证脚本，但我不知道如何创建它。

function doit2() {
  if (document.getElementById('two').style.display == 'none') {
    document.getElementById('two').style.display = 'block';
  } else {
    document.getElementById('two').style.display = 'none';
  }
}

<fieldset>
  <legend><a href="#" onclick="doit2()">Personal details</a></legend>
  <div id="two">
    <div>
      <label>Surname or family name:</label>
      <input type="text" name="personal" />
    </div>
    <div>
      <label>Given name/names:</label>
      <input type="text" name="personal" />
    </div>
    <div>
      <label> Date of birth:</label>
      <input type="date" name="personal" />
    </div>
    <div>
      <label> Male </label>
      <input type="radio" name="gender" value="Male" />
    </div>
    <div>
      <label> Female </label>
      <input type="radio" name="gender" value="Female" />
    </div>
    <div>
      <label> N/A </label>
      <input type="radio" name="gender" value="NA" />
    </div>
  </div>
</fieldset>

Answer 1

试试这个:

function validateForm()
{
  debugger;
  var fields = ["surname", "name", "dob"]
  var i, l = fields.length;
  var fieldname;
  for (i = 0; i < l; i++) {
    fieldname = fields[i];
    if (document.getElementsByName(fieldname)[0].value === "") {
      alert(fieldname + " can not be empty");
      return false;
    }
  }
  return true;
}
function doit2() {
    
    if(document.getElementById('two').style.display == 'none'){
        document.getElementById('two').style.display = 'block';
    } else {
        
        if(validateForm()){
        document.getElementById('two').style.display = 'none';
        }
    }
}

<fieldset id="fieldset">
    <legend><a href="#" onclick="doit2()">Personal details</a></legend>
    <div id="two">
        <div>
            <label>Surname or family name:</label>
            <input type="text" name="surname"/>
        </div>
        <div>
            <label>Given name/names:</label>
            <input type="text" name="name"/>
        </div>
        <div>
            <label> Date of birth:</label>
            <input type="date" name="dob"/>
        </div>
        <div>
            <label> Male </label>
            <input type="radio" name="gender" value="Male" checked/>
        </div>
        <div>
            <label> Female </label>
            <input type="radio" name="gender" value="Female"/>
        </div>
        <div>
            <label> N/A </label> 
            <input type="radio" name="gender" value="NA"/>
        </div>
    </div>
</fieldset>