我有一个链接，当从电子邮件中单击时，用户会登陆一个从jquery 工具加载覆盖对话框的页面。在这个覆盖对话框中，我有一个带有输入字段的表单，我使用jquery 工具验证器来进行用户输入实时验证。问题是字段的黑色错误标签不只显示输入字段颜色变为红色，但黑色弹出错误消息不显示。如果我在链接的 href 和 rel 属性中使用 #overlayDialog 启动覆盖，则不会发生这种情况。电子邮件中的链接不是使用指向覆盖对话框的 rel 和 href 构建的。这可能是问题吗？它是 jquery 工具中的错误吗？如何解决这个问题？
- 更新 -
下面是用户单击电子邮件中的链接后进入的 html 页面。它是一个 playframework 模板视图
---playframework html模板视图-------
#{extends 'layout.html' /}
#{set title:
messages.get('app.title') +' reset password ' /}
#{set 'moreScripts'}
<script type="text/javascript" src="@{'/public/theme/js/signup.js'}"></script>
<script>
$(document).ready(function(){
/* $.tools.validator.fn("#username", function(input, value) {
return value!='Username' ? true : {
en: "Please complete this mandatory field"
};
});
*/
/* var form = $("#form").validator({
position: 'bottom left',
offset: [5, 0],
messageClass:'form-error',
message: '<div><em/></div>' // em element is the arrow
}).attr('novalidate', 'novalidate');
*/
$("#resetPassword").overlay({
// custom top position
top: 50,
// some mask tweaks suitable for facebox-looking dialogs
mask: {
// you might also consider a "transparent" color for the mask
color: '#fff',
// load mask a little faster
loadSpeed: 200,
// very transparent
opacity: 0.5
},
// disable this for modal dialog-type of overlays
closeOnClick: false,
// load it immediately after the construction
load: true
});
//initialize validator for a bunch of input fields
var inputs = $("#resetPasswordForm :input").validator( {
message: '<div><em/></div>', // em element is the arrow
grouped: true
} );
var submitFinished = function (data,errorDiv) {
if (data.success === true) {
if($("#reqPasswordErrorMessage"))
{
$("#reqPasswordErrorMessage").hide();
}
var message=$("#reqPasswordSuccessMessage")[0];
message.innerHTML = "User password has been reset successfully. ";
$("#reqPasswordSuccessMessage").show("fast");
return;
}
else {
if($("#reqPasswordSuccessMessage"))
{
$("#reqPasswordSuccessMessage").hide();
}
$("#reqPasswordErrorMessage").hide()
var errMessage = $(errorDiv)[0];
errMessage.innerHTML = "<b>" + data.error + "</b>";
$(errorDiv).show("fast");
return;
}
}
$("#requestPasswordForm").submit(function () {
var formContents = $(this).serialize();
$.ajax({
url:$(this).attr("action"),
type:$(this).attr("method"),
data:formContents,
success:function (data) {
submitFinished(data,"#reqPasswordErrorMessage");
}
});
return false;
});
});
</script>
#{/set}
<div class="overlay-dialog main-content clearfix" id="resetPassword">
<header>
<!-- <ul class="action-buttons clearfix fr">
*{<li><a href="#" class="button button-gray">Register</a></li>}*
<li><a href="#" class="button button-gray"><span class="help"></span>Forgot Password</a></li>
</ul> -->
<h2>Reset Password</h2>
</header>
<div><p>Please use form below to set a new password.</p></div>
<section>
<!-- <div> <h6>Please use form below to reset a new password.</h6>
</div> -->
<div id="reqPasswordSuccessMessage" class="message success">
<!-- &{'registration.passwordReset', email} -->
</div>
<div id="reqPasswordErrorMessage" class="message error">
</div>
#{form @SignUp.resetPasswordAction(), id:"resetPasswordForm", defaultbutton:'#loginSubmitBtn'}
<div>
<label for="password" >New Password*
</label>
<input type="password" id="password" class="large" value=""
name="password"
required="required" minlength="6" pattern="(?=.*\d)(?=.*[a-zA-Z]).{6,}" data-message="Password does not meet criteria. Please Retry." title="Must be minimum 6 alphanumeric characters (at least 1 digit and one letter)" placeholder="Password"/>
<small>minimum 6 alphanumeric characters(at least 1 digit and one letter)</small>
</div>
<div><label for="passwordConfirm">Confirm Password*
</label>
<input type="password" id="passwordConfirm" class="large" value=""
name="passwordConfirm"
required="required" data-equals="password" data-message="Passwords do not match. Please try again." placeholder="Password"/>
<small>must match password</small>
</div>
<input type="hidden" id="email" name="email" value="&{email}">
<div><button class="large button button-green fr " type="submit">Submit</button>
</div>
#{/form}
</section>
</div>