web-dev-qa-db-fra.com

Validation des entrées du tableau à l'aide du plugin de validation jquery

J'ai le formulaire suivant. J'essaie de valider les entrées à l'aide du plugin de validation jquery. J'ai essayé des codes mais ça ne marche pas. Lorsque je clique sur le bouton Soumettre, cela passe simplement à l'action du formulaire.

<form name="voucherform" action="something" method="post">
  <input type="text" name="reg_number[]" value="" />
  <input type="text" name="reg_number[]" value="" />
  <input type="text" name="reg_number[]" value="" />
  <input type="submit" name="submit" value="submit" />

Pourriez-vous s'il vous plaît me montrer comment valider le formulaire ci-dessus à l'aide du plugin de validation jquery?

Merci :)

Mon code Jquery:

 <script type="text/javascript" src="<?php echo base_url();?>support/datepicker/js/jquery-1.7.2.min.js"></script>
 <script type="text/javascript" src="<?php echo base_url();?>support/js/jquery.validate.js"></script>

 <script>
  $(document).ready(function() {

// validate signup form on keyup and submit
var validator = $("#voucherform").validate({
    showErrors: function(errorMap, errorList) {
        $(".errormsg").html($.map(errorList, function (el) {
            return el.message;
        }).join(", "));
    },
    wrapper: "span",
    rules: {

        reg_number[]: {
            required: true,
            minlength: 2,
            remote: {
                url: '<?php echo base_url();?>sales/invoice_check', async: false,
                type: 'post'
            },

        }
    },
    messages: {

        reg_number[]: {
            required: "Enter Reg Number",
            minlength: jQuery.format("Enter at least {0} characters"),
            remote: jQuery.format("{0} is already in use")
        },
    }
    });
    });
   </script>
jqueryjquery-pluginsjquery-validate
13
black_belt

Vous avez deux problèmes:

  1. Vous ne sélectionnez pas l'élément form correctement.

    Vous recherchez une form avec id "voucherform" et votre marquage n'en contient pas. Vous voulez probablement changer votre sélecteur en:

    $("form[name='voucherform']").validate({ ... });

  2. Les crochets ([]) ne sont pas valides dans les identificateurs JavaScript. Cela signifie que votre script n'est pas analysé correctement. Pour résoudre ce problème, mettez simplement entre guillemets les champs entre parenthèses, c'est-à-dire 'reg_number[]' au lieu de reg_number[].

Code de validation modifié:

var validator = $("form[name='voucherform']").validate({
    showErrors: function(errorMap, errorList) {
        $(".errormsg").html($.map(errorList, function(el) {
            return el.message;
        }).join(", "));
    },
    wrapper: "span",
    rules: {
        'reg_number[]': {
            required: true,
            minlength: 2,
            remote: {
                url: '<?php echo base_url();?>sales/invoice_check',
                async: false,
                type: 'post'
            }

        }
    },
    messages: {
        'reg_number[]': {
            required: "Enter Reg Number",
            minlength: jQuery.format("Enter at least {0} characters"),
            remote: jQuery.format("{0} is already in use")
        }
    }
});

Exemple: http://jsfiddle.net/hfrhs/

16
Andrew Whitaker

J'ai trouvé la meilleure réponse ici https://stackoverflow.com/a/17643385/146553

si vos noms d'éléments ont des index, ils sont traités comme des noms uniques.

6
todd

Vous pouvez trouver une bonne réponse ici: jquery-validation-for-array-of-input-elements . Dans jquery.validate.js, nous pouvons trouver une fonction appelée checkForm, nous devons la modifier comme suit:

checkForm: function() {
  this.prepareForm();
  for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
   if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {
     for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {
       this.check( this.findByName( elements[i].name )[cnt] );
     }
    } else {
     this.check( elements[i] );
    }
   }
  return this.valid();
}
5
Alex

voici mon chemin

 'reg_number[]':{ 
    required:function(){
      return $("input[name='reg_number[]']").filter(function(){
        return $.trim($(this).val()).length>0
      }).length==0
    }
 }

J'espère que cela vous aidera peu.

1
user995789

Il suffit de partager une méthode pour valider la case à cocher avec index et un seul d'entre eux est obligatoire.

<input type="checkbox" value="0" name="is_appraisal[0]" class="is_appraisal_f siblingcheckbox" id="is_appraisal_f">

<input type="checkbox" value="1" name="is_appraisal[1]" checked="checked" class="is_appraisal_s siblingcheckbox" id="is_appraisal_s">

Jquery Validation pour cela:

       $.validator.addMethod("onechecked", function (value, elem, param) {
            if ($(".siblingcheckbox:checkbox:checked").length > 0) {
                return true;
            } else {
                return false;
            }
        }, "You must select at least one!");

        $.validator.addClassRules("siblingcheckbox", {
            onechecked: true
        });
0
Bugfixer