13

私は次のフォームを持っています。jquery 検証プラグインを使用して入力を検証しようとしています。いくつかのコードを試しましたが、うまくいきません。送信ボタンをクリックすると、フォームのアクションに移動します。

<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" />

jquery 検証プラグインを使用して上記のフォームを検証する方法を教えてください。

ありがとう ：）

私の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>
4

4 に答える 4

16

2つの問題があります。

  1. form要素を正しく選択していません。

    form「voucherform」を含むを探していidますが、マークアップに含まれていません。セレクターを次のように変更することをお勧めします。

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

  2. 角かっこ（[]）はJavaScript識別子では無効です。これは、スクリプトが正しく解析されていないことを意味します。これを解決するには、角かっこが含まれているフィールドを引用符で囲みます。つまり、'reg_number[]'の代わりに使用しreg_number[]ます。

検証コードを微調整しました：

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")
        }
    }
});

例： http： //jsfiddle.net/hfrhs/

于 2012-06-01T02:13:27.350 に答える
5

ここで良い答えを見つけることができます: jquery-validation-for-array-of-input-elements。jquery.validate.js で、checkForm という名前の関数を見つけることができます。以下のように変更する必要があります。

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();
}
于 2014-11-25T22:05:35.783 に答える
2

ここに私の道があります

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

少しでもお役に立てれば幸いです。

于 2013-01-15T13:38:25.697 に答える