How not to validate HTML5 text box with required attribute

Question

I have one HTML text box (for quantity) and two HTML buttons (Add, Cancel) inside my form.

<form>
    <input type="number" min="1" max="100" required />
    <button type="button">Add</button>
    <button type="button">Cancel</button>
</form>

I do not want my second button (cancel) to validate the form when clicked.

Is this possible? In ASP.NET, I can use CausesValidation="false" to not trigger the validation.

Answer 1

Try this;

<button type="button" formnovalidate>Cancel</button>

I changed your code: What you want is that your form should not be validated on click of cancel, so that's why i added the formnovalidate to the button cancel.

<form>
    <input type="number" min="1" max="100" required />
    <input type="submit">Add</input>
    <input type="submit" formnovalidate>Cancel</input>
</form>

Answer 2

Try to add formnovalidate attribute to your cancel button

<button type="button" formnovalidate>Cancel</button>

Answer 3

You could use the formnovalidate-option on the cancel-button, like this:

<input name="cancel" type="submit" value="Cancel" formnovalidate/>

See Symfony2 form validation with html5 and CANCEL button