JQuery validation with "button" type rather than "submit" type for a form

Question

$('selector').validation() seems to be built more for the "input" type button than the "button" type. How would I get it working with a button type within the form?

@using(Html.BeginForm(new {id="TheForm"}))
{
     // code here
     <input id="TheButton" type="button">
}

JQuery:

$(document).ready(function() {
      $("#TheForm").validate({
            rules: {
                 "AuditDoc.Title": {
                       required: true
                  }
            }
      });
      $("#TheButton").click(function() {

      });
});

Using this basic idea, how would I get jquery validate working with a button rather than a submit type button? I've seen examples where JQuery automatically displays error messages when the rules aren't met using submit type, but it doesn't appear to work with button type. I'd appreciate any advice!

use this one button click $("#TheForm").validate();

Thulasiram
– Thulasiram

2012-08-11 13:05:32 +00:00
Commented Aug 11, 2012 at 13:05 — Thulasiram
– Thulasiram, Commented Aug 11, 2012 at 13:05

Thulasiram · Accepted Answer · 2012-08-16 07:18:26Z

8

$(document).ready(function () {
        $("#TheForm").validate({
            rules: {
                "AuditDoc.Title": {
                    required: true
                }
            }
        });

        $("#TheButton").click(function () {
            if (!$("#TheForm").validate()) { // Not Valid
                return false;
            } else {
                $("#TheForm").submit()
            }
        });

        $('#btnReset').live('click', function (e) {
            //var $validateObj = $('#formId');
            //Or
            var $validateObj = $(this).parents('form');

            $validateObj.find("[data-valmsg-summary=true]").removeClass("validation-summary-errors").addClass("validation-summary-valid").find("ul").empty();
            $validateObj.find("[data-valmsg-replace]").removeClass("field-validation-error").addClass("field-validation-valid").empty();
        });
    });

edited Aug 16, 2012 at 7:18

answered Aug 11, 2012 at 13:04

Thulasiram

8,5628 gold badges48 silver badges54 bronze badges

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

3 Comments

Ryley Over a year ago

just submit the form - validate does the rest.

TheDude Over a year ago

The problem is that validate doesn't automatically work with type "button" the way it does with type "submit". You don't get all that "validate does the rest" business with plain old buttons. It seems to be built for "submit" type buttons.

Toydor Over a year ago

In my version I need to first call $("#TheForm").validate(); and then use the valid method: if(!$("#TheForm").valid()) { }

Kanishka Panamaldeniya · Accepted Answer · 2012-08-11 13:09:18Z

7

$(document).ready(function(){

     $("#myform").validate();
     $("#byuttion").click(function() {

       if($("#myform").valid())
       {
          $("#myform").submit();
       }
       else 
      {
          return false;
      }

      });

});

answered Aug 11, 2012 at 13:09

Kanishka Panamaldeniya

17.6k31 gold badges128 silver badges195 bronze badges

1 Comment

Minhaj Mimo Over a year ago

Thanks mate. We will need to validate the form before and then check. Problem solved.

Ram · Accepted Answer · 2012-08-11 12:29:29Z

4

One hackish way could be:

$("#TheButton").click(function() {
     $("#TheForm").submit()
});

edited Aug 11, 2012 at 12:29

Ram

145k16 gold badges174 silver badges201 bronze badges

answered Aug 11, 2012 at 12:25

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

4 Comments

Ryley Over a year ago

That's not even hackish - the point is that you want to submit the form... jQuery validate does the rest. I would call most of the other answers hacky - doing the work validate would have done anyways :)

Ryley Over a year ago

@TheDude - Look at what he's actually doing - he's making the click of the button submit the form. It is emulating what a submit button does very simply.

TheDude Over a year ago

@Ryley - What it comes down to is that $.validation is built for SUBMIT type buttons, not BUTTON type. When I try using the BUTTON type, the .validation doesn't kick in. I tried using it for SUBMIT type buttons and it works as intended. Unfortunately, our application needs to be able to use BUTTON type.

J.T. Taylor Over a year ago

Ryley is correct, all you have to do is get the form to submit on click, and then it works just like a type=submit. If the form is invalid, the form submittal is cancelled.

Josh Bedo · Accepted Answer · 2012-08-11 12:33:05Z

3

It works pretty much the same as it would with a normal input except it doesn't support the submit method. preventDefault just stops the page from doing it's default request.

$("#TheButton").click(function(event) {
    event.preventDefault(); //or return false
    getData();
});

edited Aug 11, 2012 at 12:33

answered Aug 11, 2012 at 12:30

Josh Bedo

3,4723 gold badges24 silver badges33 bronze badges

1 Comment

Language Lassi Over a year ago

I'll give this a try... though giving an upvote, believing it will work :)

Collectives™ on Stack Overflow

JQuery validation with "button" type rather than "submit" type for a form

4 Answers 4

3 Comments

1 Comment

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related