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()

                        });
});

Answer 1

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 });

Answer 2

Try like this correct your code,both codes working fine

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

DEMO