我真的是 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>
最佳答案
试试这个:
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>
关于javascript - 验证输入而不是在填写完成后关闭 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44252911/