jQuery validation IE L'objet ne supporte pas la propriété
j'utilise le jQuery validation plugin . Si j'essaie de définir le champ personnalisé pour mettre en évidence il montre une erreur seulement dans IE (testé sur IE11 et IE10). L'erreur de la Console est Object doesn't support property or method 'closest' et pointe vers la ligne de la partie" surligner".
le code est:
$(document).ready( function(){
$("#formPost_connection").validate({
rules: {
mail: {
required: true
}
},
messages: {
mail: {
required: "Please enter your email address or username"
}
},
errorElement : 'div',
errorPlacement: function(error, element) {
var parent = element.closest('.form-group');
error.insertAfter(parent);
},
highlight: function(element, errorClass) {
var parent = element.closest('.form-group');
$(parent).addClass('field-error');
},
unhighlight: function(element, errorClass) {
var parent = element.closest('.form-group');
$(parent).removeClass('field-error');
}
});
});
HTML du formulaire est:
<form id="formPost_connection" autocomplete="on" method="POST" name="" action="">
<fieldset>
<div class="form-group">
<label for="account_login">Email address / User name:</label>
<div class="input-wrapper">
<input id="account_login" type="text" name="mail" title="Enter your email address or user name" required />
</div>
</div>
<div class="password-field-wrapper">
<div class="form-group" style="margin-bottom: 0;">
<label for="mdp">Password:</label>
<div class="input-wrapper">
<input id="mdp" type="password" name="mdp" title="Enter your password" required />
</div>
</div>
<a title="Did you forget your password?" class="forgot-password" href="/reset-password">Forgot your password?</a>
</div>
<button class="btn" type="submit">Log In</button>
</fieldset>
</form>
2 réponses
semble être un problème avec la façon dont la valeur de l'élément est transmise dans IE, dans IE il s'agit d'une référence d'élément dom et non d'un objet jQuery.
Juste wrap de l'élément avec jQuery comme
$(document).ready(function () {
$("#formPost_connection").validate({
rules: {
mail: {
required: true
}
},
messages: {
mail: {
required: "Please enter your email address or username"
}
},
errorElement: 'div',
errorPlacement: function (error, element) {
var parent = $(element).closest('.form-group');
error.insertAfter(parent);
},
highlight: function (element, errorClass) {
var parent = $(element).closest('.form-group');
$(parent).addClass('field-error');
},
unhighlight: function (element, errorClass) {
var parent = $(element).closest('.form-group');
$(parent).removeClass('field-error');
}
});
});
Démo: Violon
je sais que c'est un vieux post, mais j'ai pensé qu'il valait la peine de le mettre à jour.
l'objet transféré est un élément dom, et sera toujours un élément dom. Contrairement à Arun P la réponse de Johny
le problème est que tous les navigateurs sauf ie ont mis en œuvre leur propre fonctionnalité expérimentale la plus proche, permettant à la fonction la plus proche d'être utilisée directement sur les éléments dom; cela signifie que jquery n'était pas nécessaire pour les éléments navigateurs pour effectuer la fonctionnalité la plus proche, c'est pourquoi il semble être un seul bug IE. En fait, ce n'est pas un bug que le code écrit est fautif.
cela a été mis en œuvre sur chrome le 03/03/2015, seulement 2 mois avant cette question.
l'approche correcte actuellement, comme expliqué par la réponse D'Arun P. Johny est:
$(element).closest('.form-group')
pour de plus amples informations sur la fonctionnalité expérimentale la plus proche, veuillez vous référer à https://developer.mozilla.org/en-US/docs/Web/API/Element/closest