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.

Ibis

Reading material: #11761702 – Lag

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>

Sawicki

Which one is appropriate to use? formvalidate or novalidate? – Ibis

Mix of your 2 answers... formnovalidate :) – Visage

Not working for ASP.NET ImageButton even though I add CausesValidation="false" and formnovalidate for IE11 – Sekyere

Answer 2

Try to add formnovalidate attribute to your cancel button

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

Visage

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

Mcginnis

Answer 4

If you have the input button as runat=server then you must have the property causesvalidation="false" or else if you are simply using html input type button for cancel use javascript to redirect to your page on click of cancel.

For eg. 1)

<input type="button" id="btnCancel" class="button blue" value="Cancel" **causesvalidation="false"** onserverclick="btnCancel_Click" runat="server" />

2)

<input type="button" id="btnCancel" class="button blue" value="Cancel" **onclick="GoTo();"**/>

<script type="text/javascript">
function GoTo() {
            window.location.href = '../default.aspx';
        }
</script>

Sericeous

Answer 5

Try this code at asp.net 5enter link description here button control

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

Aldo Flores Reyes @alduar .net news

Vanhouten

Answer 6

try this one.it works fine.It will work on submit button

<asp:TextBox runat="server" ID="inputusername" required />

Golgi