CODEWITHSUNDEEP
jqueryasp.net
Priyank Thakkar
Priyank Thakkar

Reputation: 4852

On validation faliure stop postback

I am using ASP.NET with jquery. I am using jquery for validation.

On validation failure I want to stop postback, but I am unable to do it.

Code is as mentioned below:

Login.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="WebApplication1.Login" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('input[name$=UserName]').data("state", "U");
            $('input[name$=Password]').data("state", "U");

            $('input[name$=btnLogin]').mouseenter(function () {
                $('input[name$=btnLogin]').addClass('login-button-hover');
            });

            $('input[name$=btnLogin]').mouseleave(function () {
                $('input[name$=btnLogin]').removeClass('login-button-hover');
            });

            $('input[name$=UserName]').val('Username');
            $('input[name$=UserName]').addClass('username-password-textbox-load');
            $('input[name$=UserName]').focusin(function () {
                $('input[name$=UserName]').data("state", "C");
                $('input[name$=UserName]').val('');
                $('input[name$=UserName]').addClass('username-password-textbox-focus');
                $('input[name$=UserName]').removeClass('username-password-textbox-load');
            });

            $('input[name$=UserName]').focusout(function () {
                $('input[name$=UserName]').removeClass('username-password-textbox-focus');
            });

            $('input[name$=Password]').val('Password');
            $('input[name$=Password]').addClass('username-password-textbox-load');
            $('input[name$=Password]').focusin(function () {
                $('input[name$=Password]').data("state", "C");
                $('input[name$=Password]').val('');
                $('input[name$=Password]').removeClass('username-password-textbox-load');
                $('input[name$=Password]').addClass('username-password-textbox-focus');
            });

            $('input[name$=Password]').focusout(function () {
                $('input[name$=Password]').removeClass('username-password-textbox-focus');

            });           

            $('input[name$=btnLogin]').click(function (evt) {
                var uState = $('input[name$=UserName]').data("state");
                var pState = $('input[name$=Password]').data("state");

                if ($('input[name$=UserName]').val() == '') {
                    $('input[name$=UserName]').addClass('error-style');
                }
            });



        });
    </script>
</head>
<body>
    <form id="loginForm" runat="server">
        <div class="login-div">
            <asp:Login runat="server" OnAuthenticate="Unnamed_Authenticate">
                <LayoutTemplate>
                    <table>
                        <tr>
                            <td valign="middle">
                                <div align="left">
                                    <label class="login-header-text">Sign In</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td valign="middle">
                                <div align="left">
                                    <label class="login-header-text username-password-text">Username</label><br />
                                    <asp:TextBox runat="server" ID="UserName" CssClass="username-password-textbox" />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td valign="middle">
                                <div align="left">
                                    <label class="login-header-text username-password-text">Password</label><br />
                                    <asp:TextBox runat="server" ID="Password" TextMode="Password" CssClass="username-password-textbox" />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td valign="middle">
                                <div align="left" style="margin-top: 5px;">
                                    <asp:CheckBox runat="server" ID="chkbxRemember" Text="Stay signed in" CssClass="login-header-text remember-user-text" />
                                    <asp:Button runat="server" ID="btnLogin" Text="Login" CssClass="login-button" />
                                </div>
                            </td>
                        </tr>
                    </table>
                </LayoutTemplate>
            </asp:Login>
        </div>
    </form>
</body>
</html>

style.css

html
{
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

body
{
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

div
{
    margin: 0px;
    padding: 0px;
}

table
{
    margin: 0px;
    padding: 0px;
    border: none;
    border-collapse: collapse;
}

.login-div
{
    border: 2px solid #89a2a6;
    background-color: #ccf1fa;
    padding: 15px;
    width: 260px;
}

.login-header-text
{
    font-family: Calibri;
    font-weight: normal;
    font-size: 16pt;
    color: #89a2a6;
}

.username-password-text
{
    font-weight: bold;
    font-size: 12pt;
}

.username-password-textbox
{
    width: 250px;
    height: 25px;
    border: 1px solid #89a2a6;
}

.username-password-textbox-focus
{
    border-color: #5bd0f1;
}

.username-password-textbox-load
{
    color: #89a2a6;
}

.remember-user-text
{
    font-size: 12pt;
}

.login-button
{
    border: none;
    text-align: center;
    background-color: #5bd0f1;
    font-family: Calibri;
    font-weight: normal;
    font-size: 12pt;
    color: #FFFFFF;
    height: 25px;
    width: 70px;
    margin-left: 68px;
}

.login-button-hover
{
    background-color: #1ac1eb;
    cursor: pointer;
}

.error-style
{
    border: 1px solid red;
    background-color: red;
}

Upvotes: 0

Views: 1617

Answers (3)

Karl Anderson
Karl Anderson

Reputation: 34846

Given your code:

$('input[name$=btnLogin]').click(function (evt) {
    var uState = $('input[name$=UserName]').data("state");
    var pState = $('input[name$=Password]').data("state");

    if ($('input[name$=UserName]').val() == '') {
        $('input[name$=UserName]').addClass('error-style');
    }
});

You have a few choices for how to handle your situation: evt.preventDefault(), evt.stopPropogation() or return false;; any of which you can add directly after the addClass('error-style');.

It is worth noting the differences between the approaches, which is that evt.preventDefault() just stops the default action the browser would take (i.e. posting back in the case of your button, but it can also stop the browser from navigating to the href of an anchor for instance); evt.stopPropogation() actually stops the event from bubbling up the DOM and, finally, return false; will do both.

If you are interested in learning more about when and where to use or not use return false;, then I recommend reading jQuery Events - Stop (Mis)Using return false

Note: return false; behaves differently inside the context of jQuery versus plain JavaScript, in that in plain JavaScript return false; does not stop an event from bubbling up the DOM, but does cancel the default action.

Upvotes: 1

Claudio Redi
Claudio Redi

Reputation: 68400

First, I recommend you to use the submit event since that's what you're trying to handle. 

$('#loginForm').submit(function() {
    var uState = $('input[name$=UserName]').data("state");
    var pState = $('input[name$=Password]').data("state");

    if ($('input[name$=UserName]').val() == '') {
        $('input[name$=UserName]').addClass('error-style');
        return false; // <-- if not valid, cancel submit
    }
})

Upvotes: 1

Pranav Singh
Pranav Singh

Reputation: 20081

Add return false; statement in you javascript when validation fails, it will prevent postback. e.g.

if ($('input[name$=UserName]').val() == '') {
     $('input[name$=UserName]').addClass('error-style');
     return false;
}

Upvotes: 0

Related Questions