HTML Form novalidate Attribute: How it Works with Examples

The form novalidate attribute in HTML lets you skip browser checks when you submit a form. You can control errors with your own logic or script.

What is the HTML novalidate attribute?

The novalidate attribute on a form does not allow the browser to check input values when you submit it in HTML.

You can decide when and how to show errors. The browser skips required fields and input types when this attribute exists.

You place it on the <form> tag. You do not assign any value. It works as a boolean.

The form still sends data, but that does not block the user. Here is an example:

<form action="/submit" method="post" novalidate>
  <input type="email" required>
  <input type="submit" value="Send">
</form>

This form sends the data even when the email field is empty or invalid. You do not see any browser warning.

You may skip validation to use custom checks. Some projects need different rules, and others need support for special input.

HTML form validation vs JavaScript validation

HTML validation runs before the form sends data. The browser checks the rules you write in the HTML. These include required, type="email", or pattern.

JavaScript validation runs when you write your own script. You write functions to check inputs. This gives full control. You can check one field at a time or apply custom logic.

HTML validation is faster to use. JavaScript takes more work, but lets you handle every case. You can use both novalidate and then write custom checks with JavaScript.

Examples

Simple Form Without Validation:

<form action="/submit" method="post" novalidate>
  <input type="text" name="username" required>
  <input type="submit" value="Continue">
</form>

This form skips the required check. You can click “Continue” even if the username field stays empty. The form still sends a request to the server.

Email and Password Form with JavaScript Check:

<form id="flatcoding-loginForm" novalidate>
  <input type="email" id="email" required>
  <input type="password" id="password" required>
  <input type="submit" value="Login">
</form>

<script>
document.getElementById("flatcoding-loginForm").onsubmit = function (e) {
    const email = document.getElementById("email").value.trim();
    const password = document.getElementById("password").value;

    if (!email.match(/^[^@]+@[^@]+\.[^@]+$/)) {
      console.log("Enter a valid email address.");
      e.preventDefault();
      return;
    }

    if (password.length < 6) {
      console.log("Password must be at least 6 characters.");
      e.preventDefault();
      return;
    }
  };
</script>

This form skips browser checks and runs custom logic. It checks the email format and password length with JavaScript. It stops the form and shows a message if something fails.

Form That Sends Data Without Alerts:

<form action="/send" method="post" novalidate>
  <input type="email" name="user" required>
  <input type="text" name="note" pattern="[A-Za-z]+" required>
  <input type="submit" value="Send Message">
</form>

Even though the email and note fields have validation rules, this form skips them. The browser does not stop you when you send information. It ignores the required and pattern parts.

This setup helps when you want to avoid browser alerts and use backend validation instead.

Form That Bypasses Validation for Test:

<form action="/test" novalidate>
  <input type="number" name="age" min="18" required>
  <input type="submit" value="Try It">
</form>

You use this form when you test. It lets you skip the minimum age rule. You can send values below 18, and the browser does not block you.

Wrapping Up

In this article, you learned what the novalidate attribute does and how it changes form behavior. You saw how to use it in forms and how it compares to JavaScript validation.

Here is a quick recap:

• Use novalidate to stop browser checks.
• Add it to the <form> tag when you need custom rules or want more control.
• Handle input with your script or your server.
• Avoid user blocks that built-in checks can cause.

FAQs

<form novalidate>
  <input type="email" required>
  <button type="submit">Submit</button>
</form>

<form action="/submit" method="post" novalidate>
  <input type="text" required>
  <button type="submit">Send</button>
</form>

Similar Reads