我的问题我在页面中有上述表格.我想使用jquery验证引擎验证表单.您可以告诉我如何验证它以及要包含的文件.现在,我已经将jquery验证引擎包含在我的脑海中.我只是想知道如何触发验证引擎并显示文本字段的错误消息onblur ..非常感谢提前.请在下面找到我的代码:
<script src="../js/jquery-1.6.min.js" type="text/javascript"></script>
<script src="scripts/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
// binds form submission and fields to the validation engine
$('#myForm').validationEngine('validate');
});
</script>
<form class="container" id="myForm" method="post" action="">
<div>
<span>Field is required : </span>
<label for="Firstname">Firstname</label>
<input type="text" class="validate[required] text-input" id="name" name="Firstname"/>
</div>
<div>
<span>Field is required : </span>
<label for="name">middlename</label>
<input type="text" id="name" name="middlename" class="validate[required] text-input"/>
</div>
<div>
<span>Field is required : </span>
<label for="name">lastname</label>
<input type="text" id="name" name="lastname" class="validate[required] text-input"/>
</div>
</form>
我正在使用Jquery验证引擎(https://github.com/posabsolute/jQuery-Validation-Engine)作为我的一个表单.验证工作正常,但即使字段值不符合验证,也无法阻止表单提交:
我有一份时事通讯Sigunp表格如下:
<form id="submit-newsletter" method="POST" action="">
<input type="text" class="searchform validate[required, custom[email]]" value="Enter Your Email" id="email" name="nw-email" onblur="defaultInput(this);" onfocu s="clearInput(this);" />
<input type="hidden" id="newsletter" name="newsletter" value="nl" />
<input type="submit" class="submit" title="Signup" value="Sign Up" name="newsletter-signup" onclick="newsletterSubscribe(event);" />
</form>
此表单通过ajax提交如下:
// Newsletter Subscription Without Refresh
function newsletterSubscribe(e) {
e.preventDefault();
var dataString = 'nw-email=' + $('input[name=nw-email]').val() + '&newsletter=' + $('input[name=newsletter]').val();
$.ajax({
type: "POST",
url: "/newsletter/",
data: dataString,
success: function () {
$('#newsletter-box').html('<div id="message"></div>');
$('#message').html('<img width="18px" height="18px" src="/static/img/smtick.png" /><h5>Thank You !</h5>')
.append('<p>We have recieved your …我的jquery验证表单不是验证..代码就像
<script type='text/javascript'>
$(document).ready(function()
{
$('#frm').validationEngine('validate');
});
</script>
<div id='gap'> </div>
<div id='main'>
<div id='login-box'>
<h2><span> ".HD_LOGIN." </span></h2>
<table align='center'>
<form id='frm' name='frm' >
<tr>
<td class='name'> <span>".LBL_USERNAME." </span> </td>
<td> <span> </span> </td>
<td> <input type='text' name='username' id='username' class='input validate[required]'/><input type='hidden' name='login' value='1' /></td>
</tr>
<tr>
<td id='error-show'> <span>   </span> </td>
</tr>
<tr>
<td class='name'> <span>".LBL_PASSWORD."</span></td>
<td> <span> </span> </td>
<td> <input type='password' name='password' id='password' class='input validate[required]'/></td>
</tr>
<tr>
<td id='error-show'><span> </span> </td>
</tr>
<tr> …试图用10位数的电话号码验证,没有空格或除数字以外的任何其他字符.我认为我有正确的reg ex,但我不确定如何实现代码,所以它也适用于NO空格.
到目前为止我做了什么:在jquery.validationEngine-en.js中添加
// ADDED for 10 digit phone
"phone10": {
"regex": /^[\d ]+$/,
// alertText brings up two error messages so using alertText2
"alertText2": " numbers only: xxxxxxxxxx",
},
然后我在jquery.validationEngine.js中添加了phone10 case语句:
case "phone10":
errorMsg = methods._getErrorMessage(form, field, rules[i], rules, i,
options, methods._phone10Size);
break;
并把下面的函数称为_phone10Size:
_phone10Size: function(field, rules, i, options) {
var max = rules[i + 1];
var len = field.val().length;
if (len < 10) {
var rule = options.allrules.phone10;
return 10 + rule.alertText2;
}
},
哦是的,我还必须在表单输入字段上放置maxlength ="10".我知道它不优雅甚至"适当".有人能告诉我如何实现这10个不允许空格的数字吗？谢谢.
我使用jQuery Validate Engine Plugin和bootstrap.这个插件工作但是当我使用bootstrap-select插件更改下拉选择框样式时,验证引擎无法正常工作.
HTML:
<div class="row-fluid sortable">
<div class="box span12">
<div class="box-header well" data-original-title>
<h2><i class="icon-picture"></i>Change Password</h2>
</div>
<div class="box-content">
<form action="#" id="fm">
<div class="control-group">
<label class="control-label" for="disabledInput">Email</label>
<div class="controls">
<select name="sport" id="sport" class="validate[required]">
<option value="">Choose a sport</option>
<option value="option1">Tennis</option>
<option value="option2">Football</option>
<option value="option3">Golf</option>
</select>
</div>
</div>
<input type="text" name="test" id="test" class="validate[required] text-input" />
<input type="submit" name="submit" />
</form>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
JS:
jQuery(document).ready(function () {
// binds form submission and fields …javascript css jquery twitter-bootstrap jquery-validation-engine
我有一张表格里面有3张bootstrap tabs.Client Validation当validation error发生的选项卡打开并submit button单击时,它可以正常工作.但是,当我切换到一个没有错误的选项卡(在其他选项卡中有错误)post back时,会出现a ,我得到正确的验证消息.
这是一个小问题,但在这种情况下不希望回发,因为必须在向服务器发送请求之前完成完整的客户端验证.
我该如何纠正这种行为？
下面是我的表单HTML的副本:
@model RBZPOSMVC.ViewModel.CreateEditItem
....
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#Details">Item Details</a></li>
<li><a data-toggle="tab" href="#Sales">Sale Price Groups</a></li>
<li><a data-toggle="tab" href="#Purchases">Purchase Price Groups</a></li>
</ul>
<div class="tab-content">
<div id="Details" class="tab-pane fade in active">
<div class="form-group">
@Html.LabelFor(model => model.Item.ItemCode, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model …