HTML Submit formNoValidate Property: Submit Button Form No Validate

HTML Submit formNoValidate Property: Submit Button Form No Validate

The formNoValidate attribute is a boolean attribute specific to the <button> element when its type attribute is set to submit. It allows you to bypass the standard HTML form validation when the form is submitted using that particular submit button. This is especially useful when you want to provide an option for users to save their progress or submit a form with incomplete or invalid data without triggering validation errors.

Purpose of formNoValidate

The primary purpose of the formNoValidate attribute is to give developers control over when form validation occurs. It allows you to create submit buttons that, when clicked, will submit the form without performing the usual validation checks. This can be beneficial in scenarios such as:

• Save Draft: Allowing users to save a draft of a form without filling in all required fields.
• Preview: Providing a preview of the data without requiring full validation.
• Submit Incomplete Data: Accepting incomplete data submissions in specific cases.

Syntax

The formNoValidate attribute is a boolean attribute. Its presence indicates that the form should not be validated when submitted via that button.

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

Attributes Table

| Attribute | Type | Description |
| :————- | :—— | :———————————————————————————————————— |
| formNoValidate | Boolean | When present, this attribute specifies that the form should not be validated when submitted by this button. |

Examples

Let’s explore some practical examples of how to use the formNoValidate attribute in HTML forms.

Basic Example

In this example, we have a simple form with required fields. The “Submit” button will trigger validation, while the “Save Draft” button will bypass validation using formNoValidate.

<form id="myForm_novalidate">
  <label for="name">Name (required):</label>
  <input type="text" id="name" name="name" required /><br /><br />

  <label for="email">Email (required):</label>
  <input type="email" id="email" name="email" required /><br /><br />

  <button type="submit">Submit</button>
  <button type="submit" formnovalidate>Save Draft</button>
</form>

In this example, if you click the “Submit” button without filling in the required fields, the browser will display validation errors. However, if you click the “Save Draft” button, the form will submit without any validation checks.

Form with JavaScript Validation

Here, we’ll add some JavaScript to handle the form submission and demonstrate that the formNoValidate button bypasses both HTML and JavaScript validation.

<form id="myForm_js_novalidate">
  <label for="username">Username (required, min length 5):</label>
  <input type="text" id="username" name="username" required minlength="5" /><br /><br />

  <label for="age">Age (required, must be a number):</label>
  <input type="number" id="age" name="age" required /><br /><br />

  <button type="submit" onclick="validateForm_novalidate()">Submit</button>
  <button type="submit" formnovalidate onclick="saveDraft_novalidate()">
    Save Draft
  </button>
</form>

<script>
  function validateForm_novalidate() {
    const username_novalidate = document.getElementById("username").value;
    const age_novalidate = document.getElementById("age").value;

    if (username_novalidate.length < 5 || isNaN(age_novalidate)) {
      alert("Validation failed. Please check your inputs.");
      return false;
    }

    alert("Form submitted with validation!");
    return true;
  }

  function saveDraft_novalidate() {
    alert("Form saved as draft without validation!");
    return true;
  }
</script>

In this setup, the validateForm_novalidate() function is called when the “Submit” button is clicked. If validation fails, an alert is shown, and the form submission is prevented. However, clicking the “Save Draft” button triggers the saveDraft_novalidate() function and submits the form, bypassing the validateForm_novalidate() function due to the formNoValidate attribute.

Real-World Application: Multi-Step Form

Consider a multi-step form where users may want to save their progress at various stages without completing all the required fields.

<form id="multiStepForm_novalidate">
  <h2>Step 1: Personal Information</h2>
  <label for="firstName">First Name (required):</label>
  <input type="text" id="firstName" name="firstName" required /><br /><br />

  <label for="lastName">Last Name (required):</label>
  <input type="text" id="lastName" name="lastName" required /><br /><br />

  <h2>Step 2: Contact Information</h2>
  <label for="phone">Phone Number:</label>
  <input type="tel" id="phone" name="phone" /><br /><br />

  <label for="address">Address:</label>
  <input type="text" id="address" name="address" /><br /><br />

  <button type="submit">Submit</button>
  <button type="submit" formnovalidate>Save Progress</button>
</form>

In this multi-step form, the “Save Progress” button allows users to save their current entries and return later to complete the form. The formNoValidate attribute ensures they can save even if the required fields are not yet filled.

Tips and Notes

• Accessibility: Ensure that users understand when they are submitting a form without validation. Provide clear labels and instructions. ℹ️
• Server-Side Validation: Always perform server-side validation, as formNoValidate only bypasses client-side validation. 🔐
• User Experience: Use formNoValidate judiciously to enhance user experience without compromising data integrity. 💡

Browser Support

The formNoValidate attribute is widely supported across modern browsers:

• Chrome
• Edge
• Firefox
• Safari
• Opera

Conclusion

The formNoValidate attribute provides a valuable mechanism for controlling form validation on a per-submit-button basis. By strategically using this attribute, you can enhance the user experience, allowing users to save drafts, preview data, or submit incomplete forms without triggering validation errors, all while ensuring that you still perform necessary server-side validation for data integrity.