Member 13216646 Ответов: 1

Как проверить этот элемент формы

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>


Что я уже пробовал:

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

1 Ответов

Рейтинг:
0

Anshumas

Привет
Проще говоря, вы можете написать то же самое на JavaScript. Я просто добавляю пример кода для текста типа ввода, который вы можете добавить в то же самое для другого типа поля.

function doit2() {
            var flagEmpty = false;
            $("#two").find("input[type='text']").each(function () {
                if ($(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';
                }
            }
        }