Вопрос валидатора jquery tools
У меня есть ссылка, по которой пользователь щелкает по электронной почте и попадает на страницу, которая загружает диалоговое окно наложения из инструментов jquery. В этом диалоговом окне наложения у меня есть форма с полями ввода, и я использую валидатор инструментов jquery для проверки ввода пользователем в реальном времени. проблема в том, что черная метка ошибки полей не показывает, только цвет поля ввода становится красным, а всплывающее сообщение об ошибке черного цвета не отображается. этого не происходит, если я запускаю оверлей, используя #overlayDialog в атрибутах href и rel ссылки. ссылка в электронной почте не создается с использованием rel и href, указывающих на наложение диалога. может ли это быть проблемой? это ошибка в инструментах jquery? и как исправить проблему?
--Обновить--
ниже HTML-страница, на которую попадает пользователь после нажатия на ссылку в письме. это представление шаблона игровой рамки
--- просмотр html-шаблона playframework -------
#{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>
1 ответ
Я нашел ответ, изменив код инициализации валидатора, как показано ниже:
//initialize validator for a bunch of input fields
var inputs = $("#resetPasswordForm :input").validator( {
position: 'bottom left',
offset: [5, 0],
messageClass:'form-error',
message: '<div><em/></div>', // em element is the arrow
grouped: true
} );
//fix for firefox and chrome browsers
$("#resetPasswordForm").attr('novalidate', 'novalidate');
я также добавил checkValidity() в функцию отправки формы, как показано ниже:
$("#requestPasswordForm").submit(function () {
if (this.checkValidity()) {
var formContents = $(this).serialize();
$.ajax({
url:$(this).attr("action"),
type:$(this).attr("method"),
data:formContents,
success:function (data) {
submitFinished(data,"#resetPasswordErrorMessage");
}
});
}
return false;
});
});
Эти два изменения устранили проблему, и ярлыки сообщений об ошибках показываются при проверке ошибок ввода.
--ОБНОВИТЬ--
это исправление работает в браузере Safari, но чтобы оно работало на Firefox и Chrome, нам нужно добавить эту строку ниже инициализации var input:
$("#resetPasswordForm").attr('novalidate', 'novalidate');