JS HTML5 Validate on "display:none" required input elements

Question

I have a form which is a multi-div meaning: I fill some fields, then I click next and current div gets to display css proprerty set as "none".

All the fields in this form are required, below is a snippet of the situation:

<form action="" method="post">
    <div id="div1" style="display:none">
        <input name="input1" type"text" required />
        <input name="input2" type"text" required />   
    </div>
    <div id="div2" style="display:block">
        <input name="input3" type"text" required />
        <input name="input4" type"text" required />
        <input type"submit" value="submit" />
    </div>
</form>

Now the problem is that, when I submit the form, if one field of the first div is not filled up, it won't submit and Chrome gives me the following error in the Console

An invalid form control with name='input1' is not focusable.

How can I solve this situation? I've thought about catching the error and then showing the first div, but I haven't figured out how to do it.

I solved it validating the fields for "my own" before switching from the first div to the second — user3520818
– user3520818, Commented Mar 30, 2015 at 10:51
Your question makes it sound like you are creating the page and javascript. Your comment makes it sound like you have no control over the source of the page. — Teepeemm
– Teepeemm, Commented Apr 1, 2015 at 10:26

Jamie Barker · Accepted Answer · 2015-04-01 10:20:18Z

I don't get the same error, in Chrome or Firefox. However I did think that you would need to validate upon clicking "next" which should make it work:

EXAMPLE

HTML

<form action="" method="post" id="form1">
    <div id="div1" style="display:block;">
        <input name="input1" type="text" required />
        <input name="input2" type="text" required />
        <input type="button" value="next" onclick="Next();" />
    </div>
    <div id="div2" style="display:none;">
        <input name="input3" type="text" required />
        <input name="input4" type="text" required />
        <input type="submit" value="submit" />
    </div>
</form>

JS

function Next() {
    var blnNext = true;
    var form = document.getElementById('form1');
    var div = document.getElementById('div1');
    var inputs = div.querySelectorAll('input[type="text"]');
    for (index = 0; index < inputs.length; ++index) {
        if (!inputs[index].validity.valid) {
            blnNext = false;
            form.querySelectorAll('input[type="submit"]')[0].click(); //Force the form to try and submit so we get error messages
        }
    }
    if (blnNext) {
        document.getElementById('div1').style.display = 'none';
        document.getElementById('div2').style.display = 'block';
    }
}

Felixuko · Accepted Answer · 2018-05-18 12:04:49Z

1

The thing here is that the "required" html attribute is made for inputs which are modifiable by the user.

It doesn't make sense that the browser tells the user that he needs to modify an input which is not visible.

You have to leave the "submit" input for the very end and do your own javascript validations before the user can click the submit input.

answered May 18, 2018 at 12:04

Felixuko

605 bronze badges

1 Comment

Rambalac Over a year ago

It has sense when say ugly file input button is replaced by image in lable. Input is hidden but clicking label is opening file dialog.

user3093036 · Accepted Answer · 2015-04-01 08:20:05Z

0

instead of using a submit button use a normal button, attach a function to check if all the fields are filled in, only then submit that form ?

document.myform.submit();

also you can use this to avoid chrome's validation

<form action="" method="post" novalidate>

jsfidle do you mean this

edited Apr 1, 2015 at 8:20

answered Apr 1, 2015 at 8:05

user3093036

1027 bronze badges

Collectives™ on Stack Overflow

JS HTML5 Validate on "display:none" required input elements

3 Answers 3

HTML

JS

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

HTML

JS

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related