SharePoint jQuery Form validation

In this example we are going to use jQuery validation plugin to validate a SharePoint page. We are going to load all jQuery validation files from web (some from Google CDN and some from Microsoft AJAX CDN).

In order to test this example you have to create a new Visual Web Part and place the snippet bellow to your ascx file.

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js"></script>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/

jquery.validate/1.7/jquery.validate.js"></script>

<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/

jquery.ui/1.8.5/themes/cupertino/jquery-ui.css" />

<link rel="stylesheet" type="text/css" media="screen" href="http://jquery-ui.googlecode.com/svn/branches/dev/themes/base/ui.button.css" />

<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.ui.widget.js"></script>

<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.ui.button.js"></script>

<script type="text/javascript">

$.validator.setDefaults({

    highlight: function (input) {

        $(input).addClass("ui-state-highlight");

    },

    unhighlight: function (input) {

        $(input).removeClass("ui-state-highlight");

    },

    success: function (input) {

        $(input).addClass("valid").text("Ok");

    }

});

$(document).ready(function () {

    $("#aspnetForm").validate({

        rules: {

            <%=txtUsername.UniqueID %>: {

                required: true,

                minlength: 4

                },

            <%=txtEmail.UniqueID %>: {

                required: true,

                email: true

            },

            <%=txtConfirmEmail.UniqueID %>: {

                    required: true,

                email: true,

                    equalTo: "#<%=txtEmail.ClientID %>"

                },

            <%=txtPassword.UniqueID %>: {

                required: true,

                minlength: 3

            },

            <%=txtConfirmPassword.UniqueID %>: {

                    required: true,

                minlength: 3,

                    equalTo: "#<%=txtPassword.ClientID %>"

                }

        }

    })

});

</script>

<style type="text/css">

    .error { color: red; }

    .valid { color: green; }

</style>

<table class="ui-widget ui-widget-content ui-corner-all">

    <tr>

        <td colspan="2"><div class="ui-widget ui-widget-header ui-corner-all">Create new account</div></td>

    </tr>

    <tr>

        <td width="160px">Username:</td>

        <td><asp:TextBox runat="server" ID="txtUsername" CssClass="required ui-widget-content" /></td>

    </tr>

    <tr>

        <td>Password:</td>

        <td><asp:TextBox runat="server" TextMode="Password" ID="txtPassword" CssClass="required ui-widget-content" /></td>

    </tr>

    <tr>

        <td>Confirm password:</td>

        <td><asp:TextBox runat="server" TextMode="Password" ID="txtConfirmPassword" CssClass="required ui-widget-content" /></td>

    </tr>

    <tr>

        <td>Email:</td>

        <td><asp:TextBox runat="server" ID="txtEmail" CssClass="required email ui-widget-content" /></td>

    </tr>

    <tr>

        <td>Confirm email: <font style="color:#999">*</font></td>

        <td>

            <asp:TextBox runat="server" ID="txtConfirmEmail" CssClass="required email ui-widget-content" />

            <div class="err_container"></div>

        </td>

    </tr>

    <tr>

        <td></td>

        <td>

            <asp:Button runat="server" ID="btnSend" Text="Create!" CssClass="submit ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" OnClick="SendClick" />

        </td>

    </tr>

</table>

You will notice a strange behavior: if you try to submit a page that is not valid, next atempts will not submit even if the page is now valid. The code in Page_Load will fix this jQuery validation issue.

protected void Page_Load(object sender, EventArgs e)
{
    string jQueryFix = "if ($('#aspnetForm').valid()) { " +
        Page.ClientScript.GetPostBackEventReference(btnSend, "") +
        "; return true; } else { return false; }";

    btnSend.Attributes.Add(
        "onclick",
        jQueryFix);
}

protected void SendClick(object sender, EventArgs e)
{
}

Referred from Here