Reputation: 33

bootstrap validation for asp.net website

I am using the following to validate the form filed but code doesn't seem to be working properly. What is wrong?

When i click on sign in button then the appropriate error message is displayed but sign button is disabled automatically

For reference i use this link : http://www.jqueryscript.net/form/Powerful-Form-Validation-Plugin-For-jQuery-Bootstrap-3.html

My Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="login.aspx.cs" Inherits="login" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="UTF-8">
        <title>Prajakta Services | Log in</title>
        <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
        <!-- bootstrap 3.0.2 -->
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <!-- font Awesome -->
        <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />

        <!-- Theme style -->
        <link href="css/AdminLTE.css" rel="stylesheet" type="text/css" />

        <!-- jQuery 2.0.2 -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

        <!-- Bootstrap -->
        <script src="js/bootstrap.min.js" type="text/javascript"></script>

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->

    <script type="text/javascript" language="javascript" src="js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" language="javascript" src="js/bootstrapValidator.js"></script>

    <link href="css/bootstrapValidator.css" rel="stylesheet" type="text/css" />


<script type="text/javascript">
$(document).ready(function() {
    $('#form1').bootstrapValidator({
        //live: 'disabled',
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            //invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            txt_user_id: {
                validators: {
                    notEmpty: {
                        message: 'The first name is required and cannot be empty'
                    }
                }
            },
            txt_password: {
                validators: {
                    notEmpty: {
                        message: 'The password is required and cannot be empty'
                    },
                    different: {
                        field: 'username',
                        message: 'The password cannot be the same as username'
                    }
                }
            },
         }
    });
});
</script>
</head>
<body class="bg-black">
    <form id="form1" method="post" runat="server">
    <div>
    <div class="form-box" id="login-box">
            <div class="header">Sign In</div>

                <asp:Label ID="lbl_msg" runat="server" Text=""></asp:Label>
                <div class="body bg-gray">
                    <div class="form-group">
                        <asp:TextBox ID="txt_user_id" name="userid" runat="server" class="form-control" placeholder="User ID"></asp:TextBox>
                    </div>
                    <div class="form-group">
                        <asp:TextBox ID="txt_password" runat="server" name="pass" class="form-control" placeholder="Password" TextMode="Password"></asp:TextBox>
                    </div>
                </div>
                <div class="footer">                                                               
                    <asp:Button ID="btn_login" runat="server" Text="Login" 
                        class="btn bg-olive btn-sm" onclick="btn_login_Click"/>

                    <asp:Button ID="btn_cancel" runat="server" Text="Cancel" 
                        class="btn bg-olive btn-sm"/>

                    <p><a href="#">I forgot my password</a><br />
                    <a href="register.aspx">Sign Up</a></p>
                </div>
        </div>
    </div>
    <br />
    </form>
</body>
</html>

Please can you suggest the corrections needed in my code and thank you for your suggestions in advance

Upvotes: 0

Answers (2)

Omkar Hendre

Reputation: 33

I solve this problem here is the solution for future reference I place the java script code in head section before that i include all the required js files

<head>
<script type="text/javascript">
    $(document).ready(function() {
        $('#form1').bootstrapValidator({
            feedbackIcons: {
                valid: 'fa fa-check',
                invalid: 'fa fa-times',
                validating: 'fa fa-refresh'
            },
            fields: {
                // There is no single quote
                userid: {
                    validators: {
                        notEmpty: {
                            message: 'The username is required and cannot be empty'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: 'The username must be more than 6 and less than 30 characters long'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9]+$/,
                            message: 'The username can only consist of alphabetical and number'
                        },
                        different: {
                            field: 'password',
                            message: 'The username and password cannot be the same as each other'
                        }
                    }
                },
                pass: {
                    validators: {
                        notEmpty: {
                            message: 'The password is required and cannot be empty'
                        },
                    }
               }
            }
        });
    });
</script>
</head>

<body>
<form id="form1" method="post" runat="server">
    <div>
    <div class="form-box" id="login-box">
            <div class="header">Sign In</div>
                <asp:Label ID="lbl_msg" runat="server" Text=""></asp:Label>
                <div class="body bg-gray">
                    <div class="form-group">
                        <asp:TextBox ID="txt_user_id" runat="server" class="form-control" placeholder="User ID" name="userid"
                        required data-bv-notempty-message="The User ID is required and cannot be empty"></asp:TextBox>

                    </div>
                    <div class="form-group">
                        <asp:TextBox ID="txt_password" runat="server" class="form-control" placeholder="Password" TextMode="Password" name="pass"
                        required data-bv-notempty-message="The password is required and cannot be empty"></asp:TextBox>

                    </div>
                </div>

                <div class="footer">                                                               
                    <asp:Button ID="btn_login" runat="server" Text="Login" 
                        class="btn bg-olive btn-sm" onclick="btn_login_Click"/>

                    <asp:Button ID="btn_cancel" runat="server" Text="Cancel"
                        class="btn bg-olive btn-sm" OnClientClick="resetFields(form1);"/>

                    <p><a href="#">I forgot my password</a><br />
                    <a href="register.aspx">Sign Up</a></p>
                </div>
        </div>
    </div>
    <br />
    </form>
</body>

Thanks for your good responses thanks a lot

Upvotes: -1

Brent Jenkins

Reputation: 56

First observation is that it looks like you've got a typo here:

$('#from1').validate

Shouldn't this be:

$('#form1').validate

Upvotes: 2

bootstrap validation for asp.net website

Answers (2)

Related Questions