Je crée un formulaire de contact pour mon site Web et et utiliser JavaScript vers la première couche de validation avant de la soumettre, ce qui est à nouveau vérifié via PHP mais je suis relativement nouveau à JavaScript, voici mon script ...
$("#send").click(function() {
var fullname = $("input#fullname").val();
var email = $("input#email").val();
var subject = $("input#subject").val();
var message = $("textarea#message").val();
if (fullname == ""){
$("input#fullname").css("background","#d02624");
$("input#fullname").css("color","#121212");
}else{
$("input#fullname").css("background","#121212");
$("input#fullname").css("color","#5c5c5c");
}
if (email == ""){
$("input#email").css("background","#d02624");
$("input#email").css("color","#121212");
}else{
$("input#email").css("background","#121212");
$("input#email").css("color","#5c5c5c");
}
if (subject == ""){
$("input#subject").css("background","#d02624");
$("input#subject").css("color","#121212");
}else{
$("input#subject").css("background","#121212");
$("input#subject").css("color","#5c5c5c");
}
if (message == ""){
$("textarea#message").css("background","#d02624");
$("textarea#message").css("color","#121212");
}else{
$("textarea#message").css("background","#121212");
$("textarea#message").css("color","#5c5c5c");
}
if (name && email && subject && message != ""){
alert("YAY");
}
});
6 Réponses :
$("#send").click(function() {
var failed = false;
$('input#fullname, input#email, input#subject, textarea#message').each(function() {
var item = $(this);
if (item.val()) {
item.css("background","#121212").css("color","#5c5c5c");
} else {
item.css("background","#d02624").css("color","#121212");
failed = true;
}
});
if (failed){
alert("YAY");
}
});
En fait, il semble que a échoué est défini si tout des éléments est défini, alors que dans le code d'origine chaque article doit être défini. Echanger true et false devrait le faire, je crois (passé).
Échec est vrai lorsque au moins un élément est vide. Donc, seul si (échoué) doit être fixé à si (! Échec). Je pensais que oui est une erreur ;-)
Ok, l'autre gars semble avoir abandonné et contrairement aux autres solutions que celle-ci travaille réellement comment je l'avais avancé depuis sa fixation, merci pour l'aide et vous êtes le nouveau champion de cette page!
Comme je l'ai écrit dans le commentaire sur Lyndon Post, utilisez des classes, n'utilisez pas de règles statiques CSS comme celle-ci. Les règles CSS appartiennent aux fichiers CSS ;-)
+1 pour lui montrer plusieurs sélecteurs et enchaînant. Cette fonctionnalité clarifie considérablement votre code.
Puisque vous utilisez jQuery, je vous recommanderais de définir une classe sur chaque champ nécessitant une valeur non vide (classe = "requise").
alors vous faites quelque chose comme ceci: p>
var foundEmpty = false;
$(".required").each(function()
{
if($(this).val())
{
foundEmpty=true;
$(this).style("background-color", "red");
}
});
if(foundEmpty)
{
alert("One or more fields require a value.");
}
Je diviserais probablement une partie de cela dans mon fichier CSS. Si l'un des champs est vide, ajoutez une classe comme "vide" à l'objet, sinon, retirez-le. Ensuite, dans votre fichier CSS, vous pouvez ajouter des descripteurs tels que:
var inputs = new Array();
inputs[0] = "input#fullname";
inputs[1] = "input#email";
inputs[2] = "input#subject";
inputs[3] = "textarea#message";
var complete = true;
for (var i = 0; i < 4; i++) {
var value = $(inputs[0]).val();
if (value.length > 0) {
$(inputs[i]).removeClass("empty");
} else {
complete = false;
$(inputs[i]).addClass("empty");
}
}
if (complete) {
}
Merci mec, cela signifie beaucoup à moi, je n'ai pas pensé à ajouter tous les noms de champs dans une matrice, bonne idée!
La fusion de cette solution avec Matt rendrait ce code joli rock solide. Si vous avez déjà besoin d'ajouter un contrôle au formulaire, tout ce que vous aurez besoin de le faire est de l'ajouter au HTML et au CSS.
Comment cette réponse a-t-elle été acceptée? Dans ce type de code, vous avez réussi à serrer dans SyntaxError , RéférenceError et TypeError .
@RightsAidfred, nous ne sommes pas ici pour error Check Code des utilisateurs à la recherche de réponses, nous sommes ici pour les obtenir sur le bon chemin. Je m'attendais à ce qu'il y ait des erreurs, mais je m'attends à ce que l'OP puisse comprendre que les ellipses ne sont pas des instructions valides dans JavaScript et que lorsque je fais de petites fautes de frappe, elles seront facilement identifiées et corrigées.
"Nous ne sommes pas ici au code de vérification des erreurs pour les utilisateurs à la recherche de réponses" Bien sûr que nous sommes. Et je ne parlais pas du tout des ellipses. Toutes les erreurs ont lieu au-dessus de la relève si (complète) .
Les réponses de Glavic et de Matt étaient exactement ce que j'allais suggérer, sauf que je prendrais une étape supplémentaire en séparant la logique de la présentation.
avoir des classes définies dans votre CSS pour le moment où un champ contient une entrée non valide, puis ajoutez ou supprimez cette classe à l'aide de $. addclass () ou $. Removeclass ()
^ Cela - je le fais constamment, alors quand je sais mieux que vous devriez vraiment avoir une classe prédéfinie pour indiquer une erreur.
Vrai. Je n'utilise jamais les options statiques CSS en JavaScript. Tous les CSS sont dans * .CSS fichiers ;-)
Vous pouvez utiliser jQuery pour itérer sur chaque objet et obtenir leurs valeurs. Selon votre formulaire, ce code va changer, mais cela vous donnera un exemple. Je manque probablement un couple de crochets ici et là, mais le concept est là.
var objectName=$(this).attr('id');
$('#formId').children().each(
function(){
if ($(this).value == ""){
$(this).css("background","#d02624");
$(this).css("color","#121212");
$error[objectName]='true';
}else{
$(this).css("background","#121212");
$(this).css("color","#5c5c5c");
$error[objectName]='false';
}
}
);
$.each(error, function(key, value){
if (value=='false'){
alert (key + 'is empty');
}
});
leur donner une classe commune, définir des classes pour appliquer les styles et faire ceci:
js css html Une approche un peu plus efficace:
Belle solution, mais comment vérifierait-ce que tous les champs ne sont pas vides et exécutent la partie suivante du script E.g si (complet) {alerte ("yay");};}
@nblackburn: Oui, je l'ai laissé ça. Mis à jour.
Impressionnant, y a-t-il une chance de le faire sans ajouter une autre classe aux champs de formulaire parce que je les ai déjà définis.
@nblackburn: quelle classe voulez-vous dire? Vous pouvez utiliser votre classe existante au lieu de la classe "valider" que j'ai utilisé. Et il est inoffensif pour ajouter des classes supplémentaires telles que "valide" et "invalide" . Donc, il suffit de le faire "votre_current_class non valide" et "votre_current_class valide" .
ah, je ment une façon d'utiliser votre code sans ajouter la classe "Valider" aux champs que je veux valider, je sais que je peux ajouter plusieurs classes mais que c'est de commencer à regarder désordonnée, alors j'essayais de réduire l'utilisation de trop nombreux. .
Les exemples ne semblent pas fonctionner correctement, il ne met en évidence que les autres champs de saisie et lorsque je clique sur le champ pour le corriger, il passe temporaire temporaire jusqu'à ce que je clique ailleurs au lieu de rester de la couleur "invalide" jusqu'à ce que Je clique à l'envoi à nouveau.
Vous savez que ceci:
si (nom et& e-mail && sujets && message! = "") ne compare pas toutes ces variables par rapport à la chaîne vide, seulmessage ? Vous vouliez probablement diresi (nom! = "" && e-mail! = "" && sujet! = "" && message! = "") Votre chemin fonctionnera toujours parce quesi (quelquevar) < / CODE> TESTS Pour voir siSOITVAR peut être contraint à une valeur "Truthy" et des chaînes non vides sont "Truthy", mais si vous allez compter sur cela, alors pourquoi testerMessage! = "" à la fin. (Ou votre chemin aurait travailler si vous avez changénom versFULLNAME pour correspondre à la déclaration de variable.)