如何使用 jquery 验证插件在对话框表单上应用验证？
Posted
技术标签:
【中文标题】如何使用 jquery 验证插件在对话框表单上应用验证？【英文标题】：how to apply validation on dialog form using jquery validation plugin? 【发布时间】：2013-04-11 15:27:58 【问题描述】：我试图在单击按钮时打开一个对话框，打开的对话框包含一个登录表单，包括用户名和密码以及登录按钮。这是我打开对话框的 html 代码： HTML 代码：
<body>
<div data-role="page">
<div data-role="header" data-theme="e">
<h3>PRAYERS APP</h3>
</div>
<div data-role="content">
<div class="center-wrapper">
<a href="#login_box" id="showdialog" data-transition="pop" data-rel="dialog" data-role="button" data-icon="plus" data-theme="e">USER LOGIN AREA</a>
</div>
</div>
</div>
<div data-role="dialog" id="login_box" class="login-popup" data-dismissible="false">
<a href="#" id="closeBtn" class="ui-btn-right" data-role="button" data-rel="back" data-icon="delete" data-iconpos="notext">close btn</a>
<div data-role="content">
<div class="ui-body ui-body-b">
<form name="login" id="formlogin" method="get" action="" accept-charset="utf-8">
<div data-role="fieldcontain">
<label for="username">USER NAME:</label><br/>
<input type="text" name="username" id="usrname" placeholder="your name"/><br/>
</div>
<div data-role="fieldcontain">
<label for="password">PASSWORD:</label><br/>
<input type="password" name="password" id="usrpswd" placeholder="please enter your password"/><br/>
</div>
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<a href="#" id="signinbtn" data-role="button" data-theme="b" data-icon="check" style="text-align:center; float:right;">SIGN IN</a></div>
</fieldset>
</form>
</div>
</div>
</div>
<!-- -----login page end------------------->
</body>
当我点击“用户登录区域按钮”时，另一个问题是在另一个页面上显示对话框，而我想在同一页面上打开一个对话框： 应用淡入淡出的JS代码：
<head>
<script>
$(document).ready(function()
<!-- ///////////////////////////////login dialog and its validation start//////////////////////////////////////////////////////////-->
var loginBox;
$('#showdialog').click(function()
loginBox = $(this).attr('href');
//Fade in the Popup and add close button
$(loginBox).fadeIn(250);
//Set the center alignment padding + border
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css(
'margin-top': -popMargTop,
'margin-left': -popMargLeft
);
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(250);
return false;
);
// When clicking on the close button or the mask layer the popup closed
$('#closeBtn, #mask').live('click',function()
$('#mask, .login-popup').fadeOut(250,function()
$('#mask').remove();
);
return false;
);
);
</script>
</head>
现在在打开对话框的文本框上应用验证时遇到问题，因为我正在使用此代码但它不起作用：我在脚本标记中应用此代码
$('#login_box').dialog(
open: function(event,ui)
$('#formlogin').validate()
rules:
username:
required: true,
minlength: 4
,
password:
required: true,
minlength: 8
,
messages:
username:
required:"pls enter user name",
minlength: $.format("Keep typing, at least 0 characters required!"),
password:
required:"pls enter password",
minlength: $.format("password should be atleast 0 characters")
);
此外，对话框的登录按钮不可点击，无法触发此功能：
$('#signinbtn').on('click',function()
alert("eerer");
doLogin();
);
我想要这种类型的验证是小提琴： formvalidation 我已经在我的项目中应用了所有 jquery 插件：
【问题讨论】：
信息太多，你能概括一下吗？ 这是@Sparky 的工作。 我只想在对话框 FORM 上应用验证。已经在对话框上应用了“淡入”和“淡出”功能，但不幸的是它在另一个页面上打开了对话框，并且它的背景是黑色的。此外，只是让我知道如何在表单（对话框内部）上应用验证并应用任何对话框按钮的单击功能？ 我没有使用任何 jquery 插件进行对话框，这只是我自己的努力，我在这里申请的对话框.validate() 是表单上初始化插件的方法。将其上移一层，使其立即在您的 DOM 就绪处理程序中。
【参考方案1】：
.validate() 是表单上初始化插件的方法。将其上移一层，使其立即在您的 DOM 就绪处理程序中。
.validate() 代码中还有很多语法错误。适当的缩进和格式可以帮助您轻松查看它们...
$('#formlogin').validate() // <-- should be .validate(
rules:
username:
required: true,
minlength: 4
,
// <-- extra puts password outside of rules
password:
required: true,
minlength: 8
,
messages:
username:
required: "pls enter user name",
minlength: $.format("Keep typing, at least 0 characters required!"), // <-- extra comma
// <-- missing a comma
password:
required: "pls enter password",
minlength: $.format("password should be atleast 0 characters")
// <-- should be a );
这个格式正确...
$(document).ready(function ()
$('#formlogin').validate(
rules:
username:
required: true,
minlength: 4
,
password:
required: true,
minlength: 8
,
messages:
username:
required: "pls enter user name",
minlength: $.format("Keep typing, at least 0 characters required!")
,
password:
required: "pls enter password",
minlength: $.format("password should be atleast 0 characters")
);
);
简单演示：http://jsfiddle.net/qzdyk/
我在您的form 中添加了一个submit 按钮以进行演示。该插件将自动捕获并处理<input type="submit" /> 和<button>click</button> 的click 事件。
【讨论】：
以上是关于如何使用 jquery 验证插件在对话框表单上应用验证？的主要内容，如果未能解决你的问题，请参考以下文章
使用 jquery 警报对话框插件，如何将表单中的值发送到回调功能？表格在警报中
jQuery常用插件与jQuery使用validation插件实现表单验证实例