電子メールからクリックすると、ユーザーが 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>