CODEWITHSUNDEEP
javascriptjqueryhtml
Chris Ha
Chris Ha

Reputation: 311

Make either text-INPUT fields or SELECT OPTION required (HTML5)

This is my code so far:

https://jsfiddle.net/kfqbbn3k/

There are two divs:

div #1:

<div class="slidingDiv">
    <div>Firstname</div>
    <div class='resetOptions'>
        <input id='vVorname' name='uVorname' type='text' size='21'></input>
    </div>
    <div style="clear:both;" />
    <div>Lastname</div>
        <div class='resetOptions'>
            <input id='vNachname' name='uNachname' type='text' size='21'></input>
        </div>
        <div style="clear:both;" />
    </div>
</div>

div #2:

<div class="wrapUser">  <a href="#" class="show_hide">b) Registered Customer</a>

        <div class="slidingDiv">

            <div>
                <select>";
                    <option selected='true' value='' id='navOrderAddOrderChoose'>Choose</option>
                    <option value='CustomerA'>CustomerA</option>
                    <option value='CustomerB'>CustomerB</option>
                </select>
            </div>
            <div style="clear:both;" /></div>
    </div>
    </div>

The 1st div is used if the customer isn't registered in the Database yet.

The 2nd div is used if the customer is already in the database (I removed the PHP Code for this example).

What I want to do: I want to add a HTML5 REQUIRED control to these fields. If either the text-INPUT-fields (div1) are filled OR an SELECT OPTION (div2) is selected, the form can submit. If no div is filled out the form can't pass. So:

REQUIRED is either information from DIV1 or from DIV2.

(Please check the fiddle Code for further information)

Upvotes: 0

Views: 1236

Answers (1)

Prashanth Thurairatnam
Prashanth Thurairatnam

Reputation: 4361

Why not initially mark both text fields required then on change event of drop-down either set or remove required attribute for text fields based on the selection made.

Here is a fiddle

(points to note: in the markup I've removed novalidate on the input text fields and replaced it with required. Also I've commented the slidingDiv implementation.

Upvotes: 1

Related Questions