Validation du formulaire Jquery et html

Question

I $ .post(); correctement certains éléments de formulaires avec jquery. Maintenant, certains de ces éléments sont "requis", bien sûr je peux tester le côté serveur s'ils sont correctement remplis et renvoyer une réponse, mais ce serait bien si je pouvais déclencher l'erreur classique HTML requise, où cela met aussi en évidence champs manquants. Bien sûr je vais les tester côté serveur, mais au moins je n'ai pas besoin de faire la mise en évidence avec javascript. Je n'aime pas créer un bouton post caché. Aussi parce que je posterai plus d'une forme à la fois

formX.serialize() + formX+1.serialize() + ... 

Je voudrais savoir s'il y a un moyen. Merci à toi.

Answer 1

Vous pouvez utiliser ce plugin jQuery pour valider votre formulaire: https://jqueryvalidation.org

Vous pouvez faire quelque chose comme ceci:

$("#formX").validate({ 
    submitHandler: function(form) { 
     $(form).ajaxSubmit(); 
    } 
}); 

Answer 2

Vous pouvez également utiliser la méthode serializeArray dans jQuery ainsi .: https://api.jquery.com/serializeArray/

Exemple:

$(document).ready(function() { 

var oParams = { 
    'invalid_msgs' : { 
     'title' : 'Kindly provide the title', 
     'body' : 'Kindly provide the body', 
     'type' : 'Kindly provide the type' 
    }, 
}; 

$('#frm-add-content').submit(function(event) { 
    event.preventDefault(); 
    var oFormData = $(this).serializeArray(); 
    // console.log(oFormData); 

    for (var iIndex in oFormData) { 

     if (oFormData.hasOwnProperty(iIndex) === true) { 
      var sInputKeys = oFormData[iIndex].name; // (e.g title) 
      var sInputValues = oFormData[iIndex].value; // (e.g Title 1) 

      /* If in case there are [input] fields that 
      * are not required in this case, You can set 
      * condition like this 
      * In this case, The input that had the [author] 
      * name attribute will be 'exempted' for validation 
      */ 
      var aNotRequiredInputKeys = ['author']; 
      if ($.inArray(sInputKeys, aNotRequiredInputKeys) < 0) { 
       if ($.trim(sInputValues) === '') { 
        alert(oParams.invalid_msgs[sInputKeys]); 
        return false; 
       } 
      } 

     } 
    } 

}); 

}); 

Voici un jsfiddle pour la référence: https://jsfiddle.net/xdp70kt3/2/

Espérons que cela vous guidera bien. Sur l'autre note, vous pouvez également ajouter l'attribut required html et si vous voulez vous voulez seulement vérifier si les valeurs ont été entrées.