jQuery Validate with simple Button

a simple validation when input type button is click using jquery validation plugins

by umer qureshi

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<form id="form1" name="form1">Field 1:
    <input id="field1" type="text" class="required" />
</form>
<div>
    <input id="btn" type="button" value="Validate" />
</div>
<div>
    <input id="dialogbtn" type="button" value="Open Dialog" />
</div>
<div id="dialog-form" title="Create new user">
    <form id="form2">
        <label for="name">Name</label>
        <input type="text" name="name" id="name" required="true" />
        <br/>
        <label for="email">Email</label>
        <input type="text" name="email" id="email" required="true" email="true" />
        <br/>
        <label for="password">Password</label>
        <input type="password" name="password" id="password" />
    </form>
</div>

JavaScript

$(function () {
    //simple example 1
    //click event for first button 
    $('#btn').click(function () {
        $("#form1").valid(); //validate form 1
    });

    //example to validate inside a dialog box

    //dialogopen button click event
    $('#dialogbtn').click(function () {
        $("#dialog-form").dialog("open");
    });

    //code for dialog
    $("#dialog-form").dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            "Save": function () { //on click of save button of dialog
                if ($('#form2').valid()) { //call valid for form2 and show the errors
                    alert('submit form'); //only if the form is valid submit the form
                    $(this).dialog("close");
                }
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }

    });
});