jQuery validation works with input type="submit", but not html button element. Why?

Question

Using ASP.NET, why is it that the bassistance.de jQuery validation plugin prevents form submission when using input type="submit" elements, and not html button elements?

The validation fires when using an html button (type="submit") tag, but the form is still submitted.

Is there a way to make the jQuery validation plugin work with html button elements?

A quick example:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <script type="text/javascript">
            $(document).ready(function () {
                $("#form1").validate({
                    rules: {
                        txtFirstName: {
                            required: true
                        }
                    },
                    messages: {
                        txtFirstName: {
                            required: "* First Name required<br/>"
                        }
                    }
                });
            });
        </script>
    </head>

    <body>
        <form id="form1" runat="server">
            <input id="txtFirstName" name="txtFirstName" type="text" />
            <input id="btnSubmit1" type="submit" runat="server" value="Submit" /> <!-- WORKS! -->
            <button it="btnSubmit2" type="submit" runat="server">Submit</button> <!-- DOESN'T WORK -->
        </form>
    </body>
</html>

Your button has a typo: it should be id. Also, which browser(s) are you testing in? IE8-10 seem to work properly. As do Chrome, Opera, and Firefox. (Test: jsfiddle.net/ZQPGH) — Sampson
– Sampson, Commented May 19, 2012 at 16:37
Yes, typo was only in example. I tested in most browsers, but same behavior. The only difference I can see is that asp.net is adding an onclick attribute to the button element (onclick="__doPostBack('ctl00$MainContent$btnSubmit2','')"), and I can't seem to get around it. — jedi jay
– jedi jay, Commented May 20, 2012 at 1:36
It works fine as long as the button is a type="submit" : jsfiddle.net/vjx9aouc — Sparky
– Sparky, Commented Jun 5, 2015 at 22:45

Sampson · Accepted Answer · 2012-05-19 16:36:24Z

6

It appears to be designed that way:

// when a submitHandler is used, capture the submitting button
if (validator.settings.submitHandler) {
  inputsAndButtons.filter(":submit").click(function () {
    validator.submitButton = this;
  });
}

Unfortunately that seems to be baked in, with no other option. The documentation on :select seems to shed some more light on this:

The :submit selector typically applies to button or input elements. Note that some browsers treat element as type="default" implicitly while others (such as Internet Explorer) do not.

One solution would be to bind your button to a function that invokes the validation. In the example below we see this being done with an anchor:

$("#myform").validate();
$("a.check").click(function() {
  $("#myform").valid();
});

edited May 19, 2012 at 16:36

answered May 19, 2012 at 16:20

Sampson

269k76 gold badges546 silver badges570 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

nealio82 Over a year ago

@Johnathan Sampson Hmm, I dunno - this is in the plugin's source: var inputsAndButtons = this.find("input, button");

Sampson Over a year ago

@Nealio I see that too, trying to see if there's something there.

nealio82 Over a year ago

@Johnathan Sampson I'll let you take the lead then - I'm no JS expert.

Sparky Over a year ago

It WILL work with either an <input> or a <button> element as long as it contains a type="submit" attribute. jsfiddle.net/vjx9aouc

Collectives™ on Stack Overflow

jQuery validation works with input type="submit", but not html button element. Why?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related