如何验证此表单元素 [英] How do I validate this form element

问题描述

Currently I have a simple fieldset and I would like to be able to write a function that checks if all the inputs are filled out, and if so collapses into the legend. If one ore more of the input fields are empty the fieldset stays open. I know how to make it collapse into the legend I just need help with the validation function.

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

我尝试了什么：

What I have tried:

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

推荐答案

嗨

简单的方法你可以在JavaScript中编写相同的内容。我只是添加输入类型文本的示例代码，您也可以为其他字段类型添加。

Hi
In simple way you can write the same in JavaScript. I just adding sample code for input type text you may add in same for other field type as well.

function doit2() {
            var flagEmpty = false;

（ ＃two）。find（< span class =code-string> input [type ='text']）。each（ function （）{
if （

("#two").find("input[type='text']").each(function () { if (

（ this ）。val（）。trim（）== ）{
flagEmpty = true ;
}
}）
if （！flagEmpty）{
if （ document .getElementById（' 两个'）。style.display == ' none'）{
document .getElementById（' two'）。style.display = ' block';
} else {
document .getElementById（' two'）。style.display = ' 无;
}
}
}

(this).val().trim() == "") { flagEmpty= true; } }) if (!flagEmpty) { if (document.getElementById('two').style.display == 'none') { document.getElementById('two').style.display = 'block'; } else { document.getElementById('two').style.display = 'none'; } } }

这篇关于如何验证此表单元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！