PHP, HTML and the consequential and consecutive handling of "required"

A short question: my form

<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="POST" name="formForm">

contains several similar regions which are displayed after the very first one only once a

<div id="xyz" style="display:none">

is being converted to

<div id="xyz" style="display:inline">

through the click of a checkbox. This is all working very well.

The very first region contains something like the following:

<input type="radio" name="something1" required="required" value="1 etc." + additional PHP and JavaScript code />

Now, having clicked the checkbox to display another such region, another

<input type="radio" name="something2" required="required" value="1 etc." + additional PHP and JavaScript code />

exists, too. In other words: All of these regions respectively contain one HMTL5 required element.

Now, it seems that all the PHP conditions I use not to have the second or third etc. "required" be validated due to not being displayed (display:none) do not work:

<?php
  if (condition1 && condition2) {
?>
  <input type="radio" name="something" required="required" value="1 etc." + additional PHP and JavaScript code />
<?php
  } elseif (condition3 && condition4) {
?>
  <input type="radio" name="something" value="1 etc." + additional PHP and JavaScript code />
<?php
  }
?>

It seems as though the existing "required" in , and so on within the form overrules this PHP construct.

I know that I could use some JavaScript code to handle this problem in a different way, but I want to see whether I couldn't use this "required" issue as pure HTML5.

Here the schematized code so far:

<?php
  // some preconditions in PHP
  // definitions of variables
  // definitions of constants
  // database connection
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style> ... </style>
    <script> ... </script>
  </head>
  <body ...>
  <form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="POST" name="formForm" />
    <table cellspacing="0" id="formContainer">
    <?=siteHeader('some uestion, whatever')?>
      <tr>
        <td>
          <table ... 1>
            <... lots of HTML code, whatever ...>
              <?php
                if (condition1 && condition2) {
              ?>
                <input type="radio" name="something1" **required="required"** value="1" + additional PHP and JavaScript code />
              <?php
                } elseif (condition3 && condition4) {
              ?>
                <input type="radio" name="something1" value="2" + additional PHP and JavaScript code />
              <?php
                }
              ?>
            < ... lots of other HTML code, whatsoever ...>
          </table>

          <div id="xyz" style="display:none">

            <table ... 2>
              <... lots of HTML code, whatever ...>
                <?php
                  if (condition1 && condition2) {
                ?>
                  <input type="radio" name="something1" **required="required"** value="1" + additional PHP and JavaScript code />
                <?php
                  } elseif (condition3 && condition4) {
                ?>
                  <input type="radio" name="something1" value="2" + additional PHP and JavaScript code />
                <?php
                  }
                ?>
              < ... lots of other HTML code, whatsoever ...>
            </table>

          </div>

          <handling of submit, reset etc.>
        </td>
      <tr>
    </table>
  </form>
  </body>
  <?php
    // other PHP aspects, such as jQuery definitions
  ?>

Now, table 1 may handle the "required" issue. The values for the radio buttons within the required inputs is being saved into the database and then redisplayed using some good PHP technique to read the database entries. So the entries for the radio fields are displayed.

This works fine so far.

But once I want to make changes to the contents of table 1 and save them, I receive an attention field to fill out the "required" input from table 2 although not displayed.

The "strength" of this HTML5 operator seems to be independent of any display limitations using ... or not relevant at all for it.

Is there any way how to handle this issue in that the validation for the second (or third etc.) "required" input is only being carried out once table 2 is being displayed?

Neither the conditional context using PHP for displaying different inputs (one with the "required" flag, the other one without) does seem to work. It seems to be overridden, too, by "required".

As this "required" business seems to be scarcely documented, is there someone among you to give me some hints on this?

Best regards

Markus

Solution

display:none is meant to have things that exist but are not displayed. I do not know about this specific behaviour but since the required fields exist the browser complains if they are left empty, whether the user had a chance to do so or not.

There are several workaround possible, most of them ugly and hard to maintain. The required attribute was designed for very simple forms and it seems to me that your use case is more advanced than those. I think you should write your validation logic in JavaScript function.

If it gets really complicated you can consider on of the several libraries that do that.