'Required' attribute not working

Question

I recently created a web page for me to learn more about HTML, and I found the 'required' attribute. I added it to the fields, but it didn't do anything.

Can anyone tell me my mistake for 'required' attribute?

I want it to say "Please fill this field" when the field is empty

<html>
        <head>
            <link href="icon.ico" rel="icon">
            <title>Log In</title>
        </head>
        <body>
            <h1 align="center">Welcome to site</h1>
            <hr width="50%"/>
            <br/>
            <table align="center">
                <form>
                    <tr>
                        <td>Log In : </td>
                        <td><input type="text" name="LogInEmail" placeholder="Enter your email" required></td> </tr><tr>
                        <td>Password : </td>
                        <td><input type="password" name="password" placeholder="Password" required></td>
                    </tr>
                </form>
            </table>
            <br/>
                <table align="center">
                    <form>
                    <tr>
                        <td><input type="submit" value="    Log In    "/></td>
                    </tr>
                </form>
            </table>
        </body>
    </html>

Hello, please provide your expectation and the actual outcome so the community can help you with your "mistake" (which you don't describe). — Gildas, Nov 20 '16 at 11:22
I just want that if any of the field is not filled than I want to message that "Please fill this field" @Gildas — Harshil Modi, Nov 20 '16 at 11:47

score 4 · Accepted Answer · edited Jan 25 '21 at 17:45

Please make sure you have submit inside the first form. You have multiple forms. Hence required is not working.

<html>
  <head>
    <link href="icon.ico" rel="icon">
    <title>Log In</title>
  </head>
  <body>
    <h1 align="center">Welcome to site</h1>
    <hr width="50%" />
    <br/>
    <table align="center">
      <form id="form1" runat="server">
        <tr>
          <td>Log In : </td>
          <td>
            <input type="text" name="LogInEmail" placeholder="Enter your email" required>
          </td>
        </tr>
        <tr>
          <td>Password : </td>
          <td>
            <input type="password" name="password" placeholder="Password" required>
          </td>
        </tr>
        <tr>
          <td>
            <input type="submit" value="    Log In    " />
          </td>
        </tr>
      </form>
    </table>
  </body>
</html>

But if you insist in having multiple tables and forms, before submit, you can validate the first form. If I am not wrong, you are trying have a better UI placement which can be dealt with CSS instead of multiple Forms and tables.

score 2 · Answer 2 · answered Nov 20 '16 at 10:32

2

You took two form.You should place your submit button in the same form input require field exist.Be Careful with form.

answered Nov 20 '16 at 10:32

M.rumy

33
12

'Required' attribute not working

2 Answers2

Linked