web-dev-qa-db-fra.com

Validation jQuery en utilisant la classe au lieu du nom valeur

J'aimerais valider un formulaire à l'aide du plugin jquery validate, mais je ne parviens pas à utiliser la valeur "name" dans le code HTML, car il s'agit d'un champ également utilisé par l'application serveur. Plus précisément, je dois limiter le nombre de cases à cocher d'un groupe. (Maximum de 3.) Tous les exemples que j'ai vus utilisent l'attribut name de chaque élément. Ce que j'aimerais faire, c'est utiliser la classe à la place, puis déclarer une règle pour cela.

html

Cela fonctionne:

<input class="checkBox" type="checkbox" id="i0000zxthy" name="salutation"  value="1" />

Cela ne fonctionne pas, mais c'est ce que je vise:

<input class="checkBox" type="checkbox" id="i0000zxthy" name="i0000zxthy"  value="1" />

javascript:

var validator = $(".formToValidate").validate({    
    rules:{     
    "salutation":{  
             required:true,  
        },  
        "checkBox":{  
             required:true,  
          minlength:3  }  
   }   
});

Est-il possible de le faire - existe-t-il un moyen de cibler la classe au lieu du nom dans les options de règles? Ou dois-je ajouter une méthode personnalisée?

Cordialement, Matt

javascriptjqueryhtmlcssjquery-validate
55
Matt

Vous pouvez ajouter les règles basées sur ce sélecteur en utilisant .rules("add", options) , supprimez simplement les règles de votre choix basées sur vos options de validation, et après avoir appelé $(".formToValidate").validate({... });, faire ceci:

$(".checkBox").rules("add", { 
  required:true,  
  minlength:3
});
81
Nick Craver

Une autre façon de procéder consiste à utiliser addClassRules . C'est spécifique pour les classes, alors que l'option utilisant selector et .rules est plus générique.

Avant d'appeler

$(form).validate()

Utilisez comme ceci:

jQuery.validator.addClassRules('myClassName', {
        required: true /*,
        other rules */
    });

Réf.: http://docs.jquery.com/Plugins/Validation/Validator/addClassRules#namerules

Je préfère cette syntaxe pour un cas comme celui-ci.

33
Ricardo Silva

Je sais que c'est une vieille question. Mais moi aussi, j’ai eu besoin du même produit récemment, et j’ai eu cette question de stackoverflow + une autre réponse de ce blog. La réponse qui était dans le blog était plus simple car elle se concentre spécialement pour ce type de validation. Voici comment faire.

$.validator.addClassRules("price", {
     required: true,
     minlength: 2
});

Cette méthode ne vous oblige pas à avoir la méthode validate au-dessus de cet appel.

J'espère que cela aidera aussi quelqu'un dans le futur. Source ici .

11
Nimeshka Srimal

Voici la solution utilisant jQuery:

    $().ready(function () {
        $(".formToValidate").validate();
        $(".checkBox").each(function (item) {
            $(this).rules("add", {
                required: true,
                minlength:3
            });
        });
    });
6
Ajay Sharma

Voici ma solution (ne nécessite pas jQuery ... juste JavaScript):

function argsToArray(args) {
  var r = []; for (var i = 0; i < args.length; i++)
    r.Push(args[i]);
  return r;
}
function bind() {
  var initArgs = argsToArray(arguments);
  var fx =        initArgs.shift();
  var tObj =      initArgs.shift();
  var args =      initArgs;
  return function() {
    return fx.apply(tObj, args.concat(argsToArray(arguments)));
  };
}
var salutation = argsToArray(document.getElementsByClassName('salutation'));
salutation.forEach(function(checkbox) {
  checkbox.addEventListener('change', bind(function(checkbox, salutation) {
    var numChecked = salutation.filter(function(checkbox) { return checkbox.checked; }).length;
    if (numChecked >= 4)
      checkbox.checked = false;
  }, null, checkbox, salutation), false);
});

Mettez ceci dans un bloc de script à la fin de <body> et le fragment fera son effet magique en limitant le nombre de cases cochées à trois (ou le nombre que vous aurez spécifié).

Ici, je vais même vous donner une page de test (collez-la dans un fichier et essayez-la):

<!DOCTYPE html><html><body>
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<script>
    function argsToArray(args) {
      var r = []; for (var i = 0; i < args.length; i++)
        r.Push(args[i]);
      return r;
    }
    function bind() {
      var initArgs = argsToArray(arguments);
      var fx =        initArgs.shift();
      var tObj =      initArgs.shift();
      var args =      initArgs;
      return function() {
        return fx.apply(tObj, args.concat(argsToArray(arguments)));
      };
    }
    var salutation = argsToArray(document.getElementsByClassName('salutation'));
    salutation.forEach(function(checkbox) {
      checkbox.addEventListener('change', bind(function(checkbox, salutation) {
        var numChecked = salutation.filter(function(checkbox) { return checkbox.checked; }).length;
        if (numChecked >= 3)
          checkbox.checked = false;
      }, null, checkbox, salutation), false);
    });
</script></body></html>
2
Delan Azabani

Si vous voulez ajouter une méthode personnalisée, vous pouvez le faire

(dans ce cas, au moins une case cochée)

<input class="checkBox" type="checkbox" id="i0000zxthy" name="i0000zxthy"  value="1" onclick="test($(this))"/>

en javascript

var tags = 0;

$(document).ready(function() {   

    $.validator.addMethod('arrayminimo', function(value) {
        return tags > 0
    }, 'Selezionare almeno un Opzione');

    $.validator.addClassRules('check_secondario', {
        arrayminimo: true,

    });

    validaFormRichiesta();
});

function validaFormRichiesta() {
    $("#form").validate({
        ......
    });
}

function test(n) {
    if (n.prop("checked")) {
        tags++;
    } else {
        tags--;
    }
}
1
Barno

Pour moi, certains éléments sont créés au chargement de la page, et d'autres sont ajoutés dynamiquement par l'utilisateur; J'ai utilisé cela pour m'assurer que tout restait au sec.

Sur soumettre, trouvez tout avec la classe x, supprimez la classe x, ajoutez la règle x.

$('#form').on('submit', function(e) {
    $('.alphanumeric_dash').each(function() {
        var $this = $(this);
        $this.removeClass('alphanumeric_dash');
        $(this).rules('add', {
            alphanumeric_dash: true
        });
    });
});
1
Farzher