2017-10-20 51 views
1

Voici mon code. Ce que je veux faire est d'ajouter une validation, donc quand l'utilisateur clique sur un champ de saisie, le message de validation "nom requis" apparaît. Cependant à la minute il est juste au-dessous du champ d'entrée et est là tout le temps. MerciEssayer d'ajouter la validation jQuery sans le bouton submit()

$(document).ready(function(){ 
 
    if($('#firstname').val() == ''){ 
 
    $('.errorMsg').show(); 
 
    } else{ 
 
    $('.errorMsg').hide(); 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label for="firstname">First Name</label> 
 
<input type="text" name="firstname" id="firstname" placeholder="First name"  maxlength="15" <span class="errorMsg">Name required </span> 
 
</input>

+0

Si cela est une application réelle, je voudrais également déconseillerais 'maxlength' attribut. Les gens ont tendance à avoir des noms plus intéressants que la plupart des webdevelopers peuvent imaginer –

+0

@OliverBaumann Mais si la base de données n'accepte que 15, cela peut causer des problèmes. Mais je suis d'accord que 15 caractères est un mais faible pour un prénom. – Ivar

+0

@Ivar, si une base de données accepte seulement 15 varchars, parlez à la base de données admin ;-) honnêtement, ce n'est pas un argument. Aucune offense signifiée, évidemment! –

Répondre

0

Vous pouvez utiliser l'événement blur pour que:

$(document).ready(function() { 
 
    $('#firstname').on('blur', function() { 
 
     if ($('#firstname').val() == '') { 
 
      $('.errorMsg').show(); 
 
     } else { 
 
      $('.errorMsg').hide(); 
 
     } 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label for="firstname">First Name</label> 
 
<input type="text" name="firstname" id="firstname" placeholder="First name" 
 
    maxlength="15"> <span class="errorMsg" style="display: none;">Name required </span> 
 
</input>

0

Utilisez événement blur, qui peut être appelé directement à partir de l'élément trouvé en utilisant jQuery

$(document).ready(function(){ 

    $('.errorMsg').hide(); 

    $('#firstname').blur(function(){ 
    if($('#firstname').val() == ''){ 
     $('.errorMsg').show(); 
    } 
     else{ 
      $('.errorMsg').hide(); 
     } 

    }); 


}); 

Voici un JSFiddle

1

Utilisez CSS pour cacher d'abord le message d'erreur. Vous avez également un code HTML invalide: le message d'erreur span ne peut pas être imbriqué dans l'entrée.

Solution de travail:

$(document).ready(function(){ 
 
    $('#firstname').on('blur', function() { 
 
     if($(this).val() === '') { 
 
     $('.errorMsg').show(); 
 
     } else { 
 
     $('.errorMsg').hide(); 
 
     } 
 
    }); 
 
});
.errorMsg { 
 
    display: none; 
 
    color: red; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label for="firstname">First Name</label> 
 
<input type="text" name="firstname" id="firstname" placeholder="First name" 
 
maxlength="15"/> 
 
<span class="errorMsg">Name required </span>

0

jQuery Blur - liez un gestionnaire d'événements pour le "flou" de l'événement JavaScript, ou déclencher cet événement sur un élément.

Essayez (JSFiddle)

var firstNameInput = $('input#firstname'), 
    errorMsgEl = $('.errorMsg'); 

// Bind blur on the input for 'first name' 
firstNameInput.bind('blur', function() { 
    // Check if input is blank 
    if(firstNameInput.val() == '') { 
     // Ensure error isn't already displayed 
     if (errorMsgEl.length == 0) $("<div class='errorMsg'>Name required</div>").insertAfter(this); 
    } else { 
     errorMsgEl.remove(); 
    } 
});