Mandatory fields in form in optional sections

Question

I don't really know how to ask this, but I will try.

I have a registration form in HTML with several fields: Username, Password, Email...I also have a radio button with 3 option. The first one is ok cause it doesn't enable anything else.

The other 2 options enables 2 different sections. Actually, each of them shows extra fields. Option 2 shows 2 extra fields that are mandatory for that option.

Option 3 shows 5 fields which 2 of them are mandatory (the same 2 as in option 2).

I have validations in the form but I don't know how to deal with the 2 mandatory fields for options 2 and 3, cause if I make them mandatory, I cannot send the form with option 1. And if I don't make them mandatory, I can send the form with those 2 fields blank in option 2 and 3.

Any idea how can I do this, please? I will try to explain the structure of my form:

Username (mandatory) Password (mandatory) Email (mandatory)

Radio button with 3 options:

Option 1 (checked by default) Option 2 (once checked shows:) Address(mandatory) Phone (mandatory) Option 3 (once checked shows:) Address(mandatory) Phone (mandatory) Mobile (optional) City (optional) Postal Code (Optional) Submit button

Thanks a lot in advance!

Code:

    <form action="signUp.php" method="post" id="reg" name="reg">
      <h2>Registration</h2>
      <p>
                <div class="cabeceraFormulario">Personal data</div>
        </p>
      <p>
                <label for="username" class="floatLabel">Username</label>
                <input id="username" name="username" type="text" onkeyup="checkAvailability();"><span class="liveValidation" id="user-availability-status"></span>
            </p>
            <p>
                <label for="email" class="floatLabel">Email</label>
                <input id="email" type="text" class="keyup-email text-input" name="email" placeholder="We'll send you a mail to verify your account" onkeyup="checkAvailability();">
                <span class="liveValidation" id="email-availability-status"></span>
            </p>
            <p>
                <label for="password" class="floatLabel">Password</label>
                <input id="password" name="password" type="password">
                <span>Min: 8, Max: 18</span>
            </p>
            <p>
                <label for="confirm_password" class="floatLabel">Confirm Password</label>
                <input id="confirm_password" name="confirm_password" type="password">
                <span>Password don't match</span>
            </p>    

                <div class="cabeceraFormulario">Type of Account</div>
            <div class="container"> 
      <ul>
      <li>
        <input type="radio" id="1" name="selector" value="1" onclick="javascript:tipoCuenta();" checked>
        <label for="1">Option 1</label>

        <div class="check"><div class="inside"></div></div>
      </li>

      <li>
        <input type="radio" id="2" name="selector" value="2" onclick="javascript:tipoCuenta();">
        <label for="2">Option 2</label>

        <div class="check"><div class="inside"></div></div>
      </li>

      <li>
        <input type="radio" id="3" name="selector" value="3" onclick="javascript:tipoCuenta();">
        <label for="3">Option 3</label>
        <span id="radioError"></span>

        <div class="check"></div>
      </li>
    </ul>
      </label>
    </div>
    </div>
    <div id="option2Form" style="display:none">
    <div class="cabeceraFormulario">Option 2</div>
    <p>
                <label for="address" class="floatLabel">Address</label>
                <input id="address" name="address" type="text" onkeyup="checkAvailability();"><span class="liveValidation" id="address-availability-status"></span>
    </p>
    <p>     
                <label for="phone" class="floatLabel">Phone</label>
                <input id="phone" name="phone" type="text">
                <span>Only numbers</span>
    </p>
    </div>
    <div id="option3Form" style="display:none">
    <div class="cabeceraFormulario">Option 3</div>
    <p>
                <label for="address1" class="floatLabel">Address</label>
                <input id="address1" name="address1" type="text" onkeyup="checkAvailability();"><span class="liveValidation" id="address1-availability-status"></span>
    </p>
    <p>     
                <label for="phone1" class="floatLabel">Phone</label>
                <input id="phone1" name="phone1" type="type">
                <span>Only numbers</span>
    </p>
<p>
            <label for="mobile" class="floatLabel">Mobile</label>
            <input id="mobile" name="mobile" type="text">
            <span>Only numbers</span>
</p>
<p>
            <label for="city" class="floatLabel">City</label>
            <input id="city" name="city" type="text">
</p>
    </div>
            <p>
                <input type="submit" value="createAccount" id="submit">
            </p>
    </form>

Javascript:

function tipoCuenta() 
{

    if (document.getElementById('2').checked) 
    {

        document.getElementById('option2Form').style.display = 'block';

    }else document.getElementById('option2Form').style.display = 'none';

    if (document.getElementById('3').checked) 
    {

        document.getElementById('option3Form').style.display = 'block';

    }else document.getElementById('option3Form').style.display = 'none';

}

I just included these two files as the others are not relevant (I think). This code is working perfectly fine but, as I explained. When I chose Option 2, by filling Username, Password and Email (which are shared by the 3 options), I can send the form although Address and Phone have to be filled too (mandatory for me). I guess I'm just asking if there is a way to do what I want.

Thanks!

New try:

function validateFields() {
        if (document.getElementById("option2").checked) {
            var inpObj = document.getElementById("address");
            if (inpObj.checkValidity() == true) {
                document.getElementById("demo").innerHTML = "Please enter your address.";
                return false;
            } else {
                document.getElementById("demo").innerHTML = "Input OK";
                return true;
            } 
        } 
    }

<input type="submit" value="create my account" id="submit" onclick="return validateFields();">

Using this, if the field address is empty, the message is shown and the form is not sent but, if I enter something, the form doesn't get sent and the previous error message stays in the screen.

Answer 1

maybe a little late, but I think I was having the exact same problem you had and could just now fix it.

I was also trying to build a form with a radio button with 2 options. If the first option is checked, everything should remain the same. But if the other option is checked, a couple of elements should not be displayed, and not be required for the form to be submitted.

Here's how to handle it in my case: All of the fields in question are required by default. That's because option 1 is the default option for me. I have a handler in my javascript which controls the radio button. That handler is responsible for not displaying the optional fields and at the same time make them not required.

Here is the structure of my radio-button:

<div class="user-type-select" id="user-select">
                <p>Type of user:</p>
                <div class="form-check">
                    <input class="form-check-input" type="radio" id="user-type-private" name="user-type-select" value="private" required>
                    <label class="form-check-label" for="user-type-private">private</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" id="user-type-business" name="user-type-select" value="business" required>
                    <label class="form-check-label" for="user-type-business">business</label>
                </div>
            </div>

And here is the javascript:

var privates = document.getElementsByClassName('privates');
var userSelect = document.getElementById('user-select');
userSelect.onchange = function hidePrivates() {
if (document.getElementById('user-type-business').checked) {
    for (let i = 0; i < privates.length; i++) {
        privates[i].style.display = "none";
    }
    document.getElementById("name-input").removeAttribute("required");
    document.getElementById("birthday").removeAttribute("required");
} else {
    for (let i = 0; i < privates.length; i++) {
        privates[i].style.display = "block";
    }
    document.getElementById("name-input").setAttribute("required", "");
    document.getElementById("birthday").setAttribute("required", "");
}

You have to use the removeAttribute() and setAttribute() functions for the required attribute. This has something to do with how the attribute works, I'm not an expert on this. All I know is as long as required is present in an element, the element is required, no matter what value is assigned to it. You can read more about this right here: dynamically change required atributte for html5 input control

Also you have to select the elements with the document.getElementById()-method. At least this is the only way it worked for me. This is why I have two different approaches for the attributes display and required.

Elements with class 'privates' are the ones which should not be displayed or be required.