Jquery validate plugin on button click

Question

I am struck with the jquery ajax validations. I have a simple form with 4 text boxes i am saving data in button click, the form is not validating. It works fine when i use the submit button instead of type="button" .. How can i validate my form in button click, it is must for me..

See my fiddles: first one with the submit button

1)http://jsfiddle.net/dxEEe/2/

second is with button type

2)http://jsfiddle.net/dxEEe/33/

$(document).ready(function() {

         $("#form1").validate({
           rules: {
            txtName: {
                required: true
            }
        },
        messages: {
            txtName: {
                required: "Field should not be empty"
            }
        },
        submitHandler: function (form) {
            var txtName = $("#txtName").val();
            var txtEmail = $("#txtEmail").val();
            var txtSurName = $("#txtSurName").val();
            var txtMobile = $("#txtMobile").val();
            var txtAddress = $("#txtAddress").val();

            $.ajax({
                type: "POST",
                url: location.pathname + "/saveData",
                data: "{Name:'" + txtName + "',SurName:'" + txtSurName + "',Email:'" + txtEmail + "',Mobile:'" + txtMobile + "',Address:'" + txtAddress + "'}",
                contentType: "application/json; charset=utf-8",
                datatype: "jsondata",
                async: "true",
                success: function (response) {

                    $(".errMsg ul").remove();
                    var myObject = eval('(' + response.d + ')');
                    if (myObject > 0) {
                        bindData();
                        $(".errMsg").append("<ul><li>Data saved successfully</li></ul>");
                    } else {
                        $(".errMsg").append("<ul><li>Opppps something went wrong.</li></ul>");
                    }
                    $(".errMsg").show("slow");
                    clear();

                },
                error: function (response) {
                    alert(response.status + ' ' + response.statusText);
                }
            });
        }
    });  
    $("#btnSave").click(functioin(){
                        $("#form1").submit()

                        });
});

Sridhar R · Accepted Answer · 2014-03-24 06:37:04Z

2

Try like this correct your code,both codes working fine

$("#btnSave").click(function(){ //function() not functioin()
            $("#form1").submit();
});

DEMO

answered Mar 24, 2014 at 6:37

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

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

10 Comments

Sridhar R Over a year ago

@user3452210 always check with console before posting into stackoverflow :-) Glad to help you !

user3452210 Over a year ago

i am new to jquery ajax. sorry for silly questions...meanwhile can we include a new function in $(document).ready block?

Sridhar R Over a year ago

@user3452210 yes sure :-)

user3452210 Over a year ago

@ Sridhar will u please help me with other problem in same project?

Sridhar R Over a year ago

@user3452210 whatever it is just post question we will help you

|

Kinnary Raichura · Accepted Answer · 2014-04-21 21:20:52Z

0

If you dont want to use the $("#form1").submit(); use can use the .valid method. For example - $("#btnSave").click(function(){ $("#form1").valid();// will validate the form });

answered Apr 21, 2014 at 21:20

Kinnary Raichura

1

Collectives™ on Stack Overflow

Jquery validate plugin on button click

2 Answers 2

10 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related