select required is not working in HTML/PHP

Question

What's wrong with my code, seems like required attribute is not working, even If first option, that has "" value, is selected you can push submit and move forward. Here is the code:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
  <title>Choose</title>
</head>

<body>
         <form method="post" action="page.php">
        <select name="blabla" required>
            <option value="">Choose</option>
            <?php
            foreach($blazz as $blaz){
            ?>
            <option value="<?php echo $blaz ?>"><?php echo $blaz ?></option>
            <?php
            } 
            ?>
            </select>
            <button  type='submit' name="tvt"  value="ok" class="button">Submit</button>
            </form>
</body>
</html>

could try adding `pattern="/^(.+)$/"` to the select, (off top of my head.. might be wrong) — Dale, Apr 28 '16 at 14:40

score 0 · Answer 1 · answered Apr 28 '16 at 14:37

You forgot to close <select>...</select>

Your code should be like this:

<form method="post" action="page.php">
  <select name="blabla" required>
    <option value="">Choose</option>
    <?php
    foreach($blazz as $blaz){
    ?>
    <option value="<?php echo $blaz ?>"><?php echo $blaz ?></option>
    <?php
    } 
    ?>
  </select> <!-- This is missing -->
  <button  type='submit' name="tvt"  value="ok" class="button">Submit</button>
</form>

That was my copy/paste mistake, It's there but still not working. — , Apr 28 '16 at 14:39

score 0 · Accepted Answer · answered Apr 28 '16 at 14:46

From http://caniuse.com/#feat=form-validation

This feature is not supported in IE 9 and below, it is partially supported in the following browsers:

Safari -- Partial support refers to lack of notice when form with required fields is attempted to be submitted.
IE10 -- Partial support in IE10 mobile refers to lack of warning when blocking submission.
Partial support in Opera Mini refers to only supporting the CSS pseudo classes.

In short, Safari won't block submission even if required fields are not filled.You will need to use JavaScript to get this feature in Safari.

Do verify if this is indeed the issue first by testing it on Chrome.

score 0 · Answer 3 · answered Apr 28 '16 at 14:47

This should work

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
</head>
<body>

<form action="">
  <select name="test" required>
    <option value="">Select one</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
  </select>

  <button>Submit</button>
</form>

</body>
</html>

select required is not working in HTML/PHP

3 Answers3