Simple jquery de validation - position personnalisée message d'erreur de placement

Je suis en utilisant jquery valider plugin pour valider le numéro de dans une forme , comment puis-je placer le message d'erreur renvoyé en vertu de la touche d'entrée , je suis incapable de l'atteindre,

Voici mon image avec la question et ce dont j'ai besoin,pls vérifier - http://i.imgur.com/Gt5aNxs.png

Veuillez me suggérer comment mettre le message d'erreur personnalisé dans un Div en dessous du bouton au lieu de la valeur par défaut dessous.

Voici mon code:

<section id="contact" class="content">
<div class="container">
<h2>Contact Form Demo</h2>
<div class="row">
<div class="span12 contact-form">
<form action="mail.php" method="POST" class="form-horizontal contact-form" id="contact-form">
<!--<?php $formKey->outputKey(); ?> -->
<fieldset>  
<div class="control-group">
<label class="control-label" for="inputPhone">Phone</label>
<div class="controls">
<input class="input-80" name="phone" type="text" id="inputPhone" placeholder="inc. country &amp; area code">
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" value="Send" class="btn" id="btn-place">Send!</button>
</div>
<div >place here</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</section>
<!-- javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script>
//contact form validation
$(document).ready(function(){
$('#contact-form').validate(
{
rules: {
name: {
minlength: 3,
required: true
},
email: {
required: true,
email: true
},
phone: {
minlength: 11,
required: false,
number: true
},
subject: {
minlength: 3,
required: true
},
message: {
minlength: 20,
required: true
}
},
highlight: function(label) {
$(label).closest('.control-group').addClass('error');
},
success: function(label) {
label
.text('OK!').addClass('valid')
.closest('.control-group').addClass('success');
}
});
//contact form submission, clear fields, return message,script no shown here
</script>
Essayez de limiter votre code à la bits (dans ce cas, vous aurez probablement besoin de nous montrer les règles de phone)

OriginalL'auteur CodeGeeek | 2013-06-25

  1. 19

    Tout ce que vous devez faire est de spécifier la errorLabelContainer dans vos options et de spécifier la div vous voulez les erreurs d'aller dans:

    $('#contact-form').validate({
//all your other options here
errorLabelContainer: '#errors'
});

    Alors assurez-vous de spécifier que votre place here div a l'id errors comme ceci:

    <div id="errors"></div>

    Voir un exemple ici: http://jsfiddle.net/ryleyb/aaEFQ/ (à noter que j'ai également précisé le wrapper option, qui vous aurez probablement envie si il y a plusieurs erreurs).

    J'ai Abordé la question de manière Différente, à l'aide de: errorPlacement
    Pouvez-vous me suggérer comment ajax POST plus TARD seulement après VALIDATION ?
    utiliser le submitHandler option de Valider - il est déclenché uniquement lorsque le formulaire est valide.

    OriginalL'auteur Ryley

  2. -1
    errorPlacement: function(error, element) {
if((element.attr('name') === 'color[]')){
error.appendTo("div#errors");  
}
else if(element.attr('name') === 'font[]' ){
error.appendTo("#font-error");  
}
else{
element.before(error);
}
}
    couleur [] " ou de la police[] est le nom de cases à cocher div#erreurs ou n ° de la police d'erreur est div u que vous souhaitez diffuser votre message d'erreur personnalisé
    Vous devez vous modifier cette information dans le post, pas à laisser un commentaire.
    Bienvenue à Débordement de Pile! Bien que cette réponse est probablement correct et utile, il est préférable si vous inclure une explication avec elle pour expliquer comment elle aide à résoudre le problème. Ceci est particulièrement utile dans le futur, si il y a un changement (éventuellement sans rapport) qui provoque l'arrêt de travail et les lecteurs ont besoin de comprendre comment il a travaillé autrefois.

    OriginalL'auteur farhan Asad