web-dev-qa-db-fra.com

jQuery vérifie si toutes les entrées requises d'un formulaire ne sont pas vides

Imaginez un formulaire simple avec la méthode POST et 30 entrées.

Je voudrais créer une fonction jQuery qui sera appelée à partir du bouton de soumission. J'ai cherché comment vérifier toutes les entrées requises, mais je n'ai rien trouvé pour aider.

Je voudrais quelque chose comme ça:

var inputs_required = all inputs from my form which have attribute required;
function check_required_inputs() {
   if(inputs_required != "") {
     //create ajax with serialize() and submit form;
   }
} else {
   //highlight inputs that are empty and show a message;
}

Cela peut-il être réalisé dans jQuery?

javascriptjqueryattributesrequired
7
Bogdan C

Vous pouvez donner à toutes vos entrées requises une classe commune (required par exemple) puis utiliser each() pour les parcourir comme:

function check_required_inputs() {
    $('.required').each(function(){
        if( $(this).val() == "" ){
          alert('Please fill all the fields');

          return false;
        }
    });
    return true;
}
10
Zakaria Acharki

Zakaria a déjà publié une réponse, qui devrait très bien fonctionner. Alternativement, au lieu d'avoir une classe personnalisée, vous pouvez trouver à la place tous les éléments input, textarea et select qui ont l'attribut required et sont visible utilisation

var required = $('input,textarea,select').filter('[required]:visible');

Ensuite, parcourez-les en utilisant each() etc.

Exemple:

var allRequired = true;
required.each(function(){
    if($(this).val() == ''){
        allRequired = false;
    }
});

if(!allRequired){
    //DO SOMETHING HERE... POPUP AN ERROR MESSAGE, ALERT , ETC.
}
14
SuperMrBlob
jQuery('button').on('click', function() {
  jQuery('input:invalid').css('background-color','red');
  jQuery('input:valid').css('background-color','green');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" required="true" />
</form>
<button>click</button>

Vous donnez simplement aux entrées l'attribut required="true", Puis toutes les entrées vides requises auront la pseudo-classe :invalid.

jQuery('input:invalid') vous donne une liste de toutes les entrées invalides. .length Vous donnera la longueur de ladite liste, si la longueur est> 0, votre formulaire n'est pas valide.

2
user3154108

J'ai créé cette fonction qui vérifie si le champ est vide non seulement mais si l'utilisateur a inséré un ou des espaces sans mettre de caractère de a à b ou autre

function checkfield (champ)
{
var off='', isit=false;
for (var j=0; j <champ.val ().trim ().split (' ').length;j++)
{
off+=champ.val ().split (' ')[j];
}
off.replace (' ', '');
if (off.length==0) isit=true;
return isit;
}

utiliser :

exemple

if (checkfield ($('.class_of_field'))==true) return;
0
Balthazar DOSSOU

vous pouvez essayer ceci en supposant que le formulaire a un ID de formulaire-action et un bouton d'envoi de ID formulaire-soumettre.

var submitButton = $('#form-submit'),
    formContainer  = $('#form-action');

    submitButton.on('click',function(e){
      e.preventDefault();
      formContainer.find('input').each(function(index,ele){
        if(ele.value === null || ele.value === ''){
            var error  = " the " + ele.name + " field  is requird ";
                ele.after(error);
           }
     });
});
0
samehanwar

Vous pouvez également utiliser la fonction itérable, every () , qui renverra soit true uniquement si tous les la validation des entrées est satisfaite ou false dans le cas contraire:

function check_required_inputs() {
   var valid =  Array.prototype.every.call($('.required'), function(input) {
     return input.value;
   });

   if (valid) {
     return true;
   } else {
     alert('Please fill all the fields');

     return false;
   }
}
0
Carl Edwards