Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

验证的第一步，您需要在输入标记内添加每个输入required。如果你没有使用默认验证，你可以保持原样，否则你可以使用正则表达式。如果你决定使用任何框架 - bootstrap，angular - 他们也有自己的验证器

Answer 2

您可以使用document.getElementById("[id of element]").value或document.getElementsByName("[Name of element]").value获取输入值并验证它们。对于您的情况，您可以使用document.getElementsByName这样：

function validate() {
  if (document.getElementsByName('personal')[0].value.length == 0) {
    //set error
    alert('error');
    return false;
  }
  //Add other validation here
  return true;
}
//....
function doit2() {
  if (validate()) {
    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>
</fieldset>

Answer 3

试试这个：

＆＃13;

<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>

＆＃13;

FlatList

＆＃13;

验证输入，而不是关闭div一旦填写

3 个答案: