title: Expressjs required form elements
body: <p>I am making a sign-up page for my site. It looks like this</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" height=""&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;MVC | Signup&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    
    &lt;div&gt;
      &lt;form action="/signup" method="post" target="nothing"&gt;
        &lt;h1&gt;Sign up for Post-it&lt;/h1&gt;
        &lt;input type="text" name="name" placeholder="Your name"&gt;
        &lt;input type="text" name="usr" placeholder="Username" &gt;
        &lt;input type="password" name="psd" placeholder="Password"&gt;
        &lt;button type="submit"&gt;Sign up for post-it&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;iframe name="nothing" style="display:none"&gt;&lt;/iframe&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>But right now, you can create an account without a username or password. I tried the <code>required</code> attribute. It made something like this.</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" height=""&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;MVC | Signup&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form action="/signup" method="post" class="w-1/2 flex flex-col" target="nothing" onsubmit="alert('form submitted')"&gt;
        &lt;h1 class="text-xl text-center mb-5"&gt;Sign up for post-it&lt;/h1&gt;
        &lt;input type="text" name="name" placeholder="Your name" required&gt;
        &lt;input type="text" name="usr" placeholder="Username" required&gt;
        &lt;input type="password" name="psd" placeholder="Password" required&gt;
        &lt;button type="submit"&gt;Sign up for post-it&lt;/button&gt;
      &lt;iframe name="nothing" style="display: none"&gt;&lt;/iframe&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>This works, but the &quot;please fill out this field&quot; doesn't look that great. And if someone figures out how to bypass the required fields, that will do a lot of damage to my database. So is there a way to make sure the form isn't empty on the <em>server</em> side? Note: I'm also using ejs, so you can make error messages like this:</p>
  <pre class="lang-js prettyprint-override"><code>app.get('/error', (req, res) =&gt; {
     res.render('signup', { error: 'enter a username'}); // Could also be &quot;enter your name&quot;, or &quot;enter your password&quot;.
  });
  </code></pre>