HTML required Attribute not working

Question

My required attribute which i placed inside a row of a table doesn't seem to be working at all.

I tried closing and un-closing the input tags and changing the button type to input type = "submit" but still the problem persist.

<tr>
  <form action="">
    <td><input type="text" id="itn" required/></td>
    <td> <input type="text" id="prc" required/></td>
    <td> <input type="text" id="dt" required/></td>
    <td><input type="text" id="qn" required/></td>
    <td><input type="text" id="am" required/></td>
    <button type="button" onclick="add()" class="button button3">
      ADD
       </button>
</tr>

When I execute the code on my google chrome browser, the browser doesn't show any alert or warnings if i miss out any fields.

The HTML is invalid, `form` element should be in a `td` element, and no `td` elements inside the form, or the table should be in the form. — Teemu, Apr 08 '19 at 04:49
The problem is that, because of the way browsers recover from the errors in your HTML pointed out by Teemu, the inputs *aren't in the form at all*. — Quentin, Apr 08 '19 at 06:58
If you are going to use the native form behavior, you will need to provide names for your inputs. If `add()` is doing all of the work, then provide that logic. — ppovoski, Apr 08 '19 at 07:01

score 0 · Answer 1 · edited Apr 08 '19 at 06:58

0

Put you table inside a form. This is a basic example and use action. Inside the add function you can put custom validators and submit the form using ajax

function add() {

}

<form action="add()">
  <table>
    <tr>

      <td><input type="text" id="itn" required/></td>
      <td> <input type="text" id="prc" required/></td>
      <td> <input type="text" id="dt" required/></td>
      <td><input type="text" id="qn" required/></td>
      <td><input type="text" id="am" required/></td>
      <td><button type="submit" class="button button3">
      ADD
       </button></td>
    </tr>
  </table>

edited Apr 08 '19 at 06:58

ppovoski

4,553
5
22
28

answered Apr 08 '19 at 04:52

brk

48,835
10
56
78

invalid child of . Also logical to assume that rows repeat – charlietfl Apr 08 '19 at 04:59
@charlietfl sorry for the mistake. – brk Apr 08 '19 at 05:00
Not your fault...easy to miss stuff like that when OP does it that way – charlietfl Apr 08 '19 at 05:01

score -1 · Answer 2 · answered Apr 08 '19 at 05:14

Try this code

<tr>
    <form action="">
        <td><input type="text" id="itn" required/></td>
        <td> <input type="text" id="prc" required/></td>
        <td> <input type="text" id="dt" required/></td>
        <td><input type="text" id="qn" required/></td>
        <td><input type="text" id="am" required/></td>
        <input type="submit" onclick="add()" class="button button3" value="ADD">
    </form>
</tr>

HTML required Attribute not working

2 Answers2