twitter-bootstrap asp.net 网站的引导验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25284020/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap validation for asp.net website
提问by Omkar Hendre
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
作为参考，我使用此链接：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
请您建议我的代码中需要的更正，并提前感谢您的建议
回答by Brent Jenkins
First observation is that it looks like you've got a typo here:
第一个观察结果是，您似乎在这里有一个错字：
$('#from1').validate
Shouldn't this be:
这不应该是：
$('#form1').validate
回答by Omkar Hendre
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 jsfiles
我在这里解决了这个问题，这是供将来参考的解决方案我将 java 脚本代码放在 head 部分之前，我包含了所有必需的js文件
<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
谢谢你的好回答非常感谢
