HTML PushButton formNoValidate Property: Button Form No Validate

The formNoValidate property in HTML, specific to <button> elements of type="submit", allows you to create a submit button that bypasses the standard HTML form validation process. This means that when the button is clicked, the form will be submitted to the server regardless of whether the input fields satisfy their validation constraints (e.g., required fields, email format, etc.). This property is useful in scenarios where you want to provide users with the option to save a form in an incomplete state or submit data without full validation.

Purpose of the formNoValidate Property

The primary purpose of the formNoValidate property is to provide a means for users to submit forms without triggering validation, allowing them to save drafts or submit data without meeting all validation requirements. It’s particularly useful in scenarios where immediate and complete data validation is not critical.

Syntax

The formNoValidate property is a boolean attribute. Its presence indicates that form validation should be skipped when the button is clicked.

<button type="submit" formnovalidate>Submit without Validation</button>

Attribute Table

| Attribute | Type | Description |
| :————— | :—— | :—————————————————————————————————————————— |
| formNoValidate | Boolean | If present, specifies that the form should not be validated when submitted from this button. No value is required (boolean). |

Examples

Let’s explore how to use the formNoValidate property in various scenarios.

Basic Usage

In this example, we have a simple form with a required input field. The “Submit with Validation” button will trigger the standard form validation, while the “Submit without Validation” button will bypass it.

<form id="myForm_NoValidate_Basic">
  <label for="name">Name (required):</label><br />
  <input type="text" id="name" name="name" required /><br /><br />
  <button type="submit">Submit with Validation</button>
  <button type="submit" formnovalidate>Submit without Validation</button>
</form>

In this scenario, if the name field is left empty and the “Submit with Validation” button is pressed, the browser will show a validation message, and the form submission will be prevented. However, if you press “Submit without Validation”, the form submission will proceed regardless.

Using formNoValidate with JavaScript

You can also control the behavior of the formNoValidate property using JavaScript. Here, we dynamically set the formNoValidate attribute of a button based on a condition.

<form id="myForm_NoValidate_JS">
  <label for="email">Email (required):</label><br />
  <input type="email" id="email" name="email" required /><br /><br />
  <button type="submit" id="submitButton">Submit (May Skip Validation)</button>
</form>

<script>
  const submitButton_NoValidate_JS = document.getElementById("submitButton");
  submitButton_NoValidate_JS.addEventListener("click", function (event) {
    const shouldSkipValidation = confirm(
      "Do you want to skip form validation?"
    );
    if (shouldSkipValidation) {
      submitButton_NoValidate_JS.formNoValidate = true;
    } else {
      submitButton_NoValidate_JS.formNoValidate = false;
    }
  });
</script>

In this example, clicking the “Submit (May Skip Validation)” button will trigger a confirmation dialog. If the user confirms, the formNoValidate property is set to true, and the form is submitted without validation. Otherwise, it is set to false, and standard validation applies.

Real-World Example: Save as Draft

A common use case for formNoValidate is a “Save as Draft” button in a complex form. Users can save their progress without filling in all required fields.

<form id="myForm_NoValidate_Draft">
  <label for="title">Title (required):</label><br />
  <input type="text" id="title" name="title" required /><br /><br />
  <label for="content">Content:</label><br />
  <textarea id="content" name="content"></textarea><br /><br />
  <button type="submit">Submit</button>
  <button type="submit" formnovalidate name="saveDraft">Save as Draft</button>
</form>

<script>
  const form_NoValidate_Draft = document.getElementById("myForm_NoValidate_Draft");
  form_NoValidate_Draft.addEventListener("submit", function (event) {
    if (event.submitter && event.submitter.name === "saveDraft") {
      alert("Form saved as draft!");
    }
  });
</script>

Here, the “Save as Draft” button allows the user to save the form data even if the required “Title” field is empty. The JavaScript code detects which button was clicked and provides feedback to the user.

Browser Support

The formNoValidate property is widely supported across modern browsers:

• Chrome
• Edge
• Firefox
• Safari
• Opera

Tips and Notes

• 💡 Use formNoValidate judiciously. Ensure that bypassing validation does not compromise data integrity or security.
• 📝 Provide clear messaging to users when they are submitting a form without validation.
• ✅ Always perform server-side validation, regardless of client-side validation. Client-side validation is for user experience, while server-side validation is for data integrity.
• ⚠️ The formNoValidate attribute only disables the browser’s built-in validation. Custom JavaScript validation will still run unless you specifically prevent it.

Conclusion

The formNoValidate property of the HTML PushButton is a valuable tool for creating flexible and user-friendly forms. By allowing users to bypass client-side validation when necessary, you can provide a better user experience, especially in complex forms or scenarios where partial data submission is required. Always remember to balance the convenience of skipping validation with the need for data integrity through server-side validation and clear user communication.