HtmlConceptBeginner · 3 min read

What is novalidate in form in HTML: Simple Explanation and Example

The novalidate attribute in an HTML form disables the browser's automatic validation of form inputs before submission. When present, the form can be submitted without checking if required fields or input formats are correct.

⚙️

How It Works

Normally, when you submit a form in a browser, it checks if all required fields are filled and if inputs like emails or numbers match their expected format. This is like a friendly gatekeeper who stops you if something is missing or wrong.

Adding the novalidate attribute to the form tells the browser to skip this check. Imagine telling the gatekeeper to let everyone pass without checking their tickets. This means the form sends data immediately, even if some fields are empty or incorrect.

This is useful when you want to handle validation yourself using JavaScript or on the server side, or when you want to allow incomplete submissions for some reason.

💻

Example

This example shows a form with a required email field. The first form uses normal validation, so it won't submit if the email is empty or invalid. The second form uses novalidate, so it submits without checking.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form novalidate Example</title>
</head>
<body>
  <h2>Form with Validation</h2>
  <form action="#" method="post">
    <label for="email1">Email (required):</label>
    <input type="email" id="email1" name="email1" required>
    <button type="submit">Submit</button>
  </form>

  <h2>Form with novalidate</h2>
  <form action="#" method="post" novalidate>
    <label for="email2">Email (required but ignored):</label>
    <input type="email" id="email2" name="email2" required>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Output

Two forms appear: The first form blocks submission if the email is empty or invalid, showing a browser message. The second form submits immediately without any message, even if the email is empty or wrong.

🎯

When to Use

Use novalidate when you want full control over form validation. For example:

If you prefer to validate inputs using JavaScript for custom rules or better user experience.
If your server handles validation and you want to avoid duplicate checks in the browser.
If you want to allow users to submit forms with incomplete or partial data temporarily.

It helps avoid the browser stopping the form submission automatically, giving you flexibility.

✅

Key Points

novalidate disables browser's built-in form validation.
It allows form submission without checking required fields or input formats.
Useful when you want to validate data yourself with JavaScript or on the server.
Helps in cases where partial or incomplete data submission is needed.
Simply add novalidate as an attribute inside the form tag.

✅

Key Takeaways

The novalidate attribute stops the browser from checking form inputs before submission.

Use novalidate when you want to handle validation yourself or allow incomplete data.

Add novalidate directly inside the form tag to disable automatic validation.

Without novalidate, browsers block submission if required fields are empty or invalid.

novalidate gives you flexibility but requires you to manage validation manually.