jquery - JQueryは1つのエラーで複数のフィールドを検証します

Question

JQuery Validate プラグインを使用して、たとえば 3 つのフィールドに対して 1 つのエラー メッセージを表示するにはどうすればよいでしょうか。たとえば、3 つの dob フィールド。デフォルトでは、3 つのフィールドをすべて空白のままにすると、3 つのエラー メッセージが表示されます。3 つのフィールドにリンクされた 1 つのエラーのみが必要です。いずれかが空白の場合、エラーが発生します。

Answer 1

クリスに似てる

$("form").validate({
    rules: {
        DayOfBirth: { required: true },
        MonthOfBirth: { required: true },
        YearOfBirth: { required: true }
    },
    groups: {
        DateofBirth: "DayOfBirth MonthOfBirth YearOfBirth"
    },
   errorPlacement: function(error, element) {
       if (element.attr("name") == "DayOfBirth" || element.attr("name") == "MonthOfBirth" || element.attr("name") == "YearOfBirth") 
        error.insertAfter("#YearOfBirth");
       else 
        error.insertAfter(element);
   }
});

Answer 2

groups オプションを使用して、入力をグループ化できます。各入力にエラー メッセージがある場合、1 つのみが表示されます。

おそらく、各フィールドに関連付けられたメッセージをオーバーライドして、より意味のあるものにしたいと思うでしょう。たとえば、デフォルトでは、「このフィールドは必須です」などのエラー メッセージが表示される場合があります。そうですね、入力が 3 つある場合、それはユーザーにとってあまり良いことではありません。メッセージをオーバーライドして、「市内の電話番号が必要です」というメッセージを表示する必要があるでしょう。この例では、すべてのエラー メッセージを「有効な電話番号を入力してください」で上書きしました。

<input type="text" name="countryCode" />
<input type="text" name="areaCode" />
<input type="text" name="localNumber" />

groups: {
  phoneNumber: "countryCode areaCode localNumber"
},
rules: {
  'countryCode': {
    required: true,
    minlength:3,
    maxlength:3,
    number:true
  },
  'contactInformation[areaCode]': {
    required: true,
    minlength:3,
    maxlength:3,
    number:true
  },
  'contactInformation[localNumber]': {
    required: true,
    minlength:4,
    maxlength:4,
    number:true
  },
},
messages: {
  "countryCode": {
    required: "Please enter a valid Phone Number",
    minlength: "Please enter a valid Phone Number",
    maxlength: "Please enter a valid Phone Number",
    number: "Please enter a valid Phone Number"
  },
  "areaCode": {
    required: "Please enter a valid Phone Number",
    minlength: "Please enter a valid Phone Number",
    maxlength: "Please enter a valid Phone Number",
    number: "Please enter a valid Phone Number"
  },
  "localNumber": {
    required: "Please enter a valid Phone Number",
    minlength: "Please enter a valid Phone Number",
    maxlength: "Please enter a valid Phone Number",
    number: "Please enter a valid Phone Number"
  }
},

Answer 3

これは HTML 部分用です。

<div>
    <p class="myLabel left">Date of birth:</p>
    <p class="mandatory left">*</p>
    <div class="left">
        <p><input type="text" name="dobDay" class="required" /></p>
        <p><i>dd</i></p>
    </div>
    <div class="left">
        <p><input type="text" name="dobMonth" class="required" /></p>
        <p><i>mm</i></p>
    </div>
    <div class="left">
        <p><input type="text" name="dobYear" class="required" /></p>
        <p><i>yyyy</i></p>
    </div>
    <div class="clear"></div>
    <div class="myError">
        <label for="dateOfBirth" class="error">Please enter a valid date.</label>
    </div>
</div>

これは私が使用したスクリプトです：

$(document).ready(function() {

$("#myForm").validate({
    groups: {
      dateOfBirth: "dobDay dobMonth dobYear"
    },
    rules: {
      'dobDay': {
        required: true,
        minlength:1,
        maxlength:2,
        range: [1, 31],
        number:true
      },
      'dobMonth': {
        required: true,
        minlength:1,
        maxlength:2,
        range: [1, 12],
        number:true
      },
      'dobYear': {
        required: true,
        minlength:4,
        maxlength:4,
        number:true
      },
    },
});
});

すべての HTML 部分は、必要に応じてカスタマイズできます。このフィールドを既存のフォームに追加する必要があったため、これらの複雑なレイアウトを使用しました。しかし、それはうまくいく例です！誰にも役立つことを願っています！

Answer 4

これはシェアしたほうがいいと思いました。私のために働いた完全なコード。

HTML

<div class="clearfix bl">
    <label>Fecha de nacimiento</label>
    <select name="fechanacimdia" id="fechanacimdia"></select>
    <select name="fechanacimmes" id="fechanacimmes"></select>
    <select name="fechanacimano" id="fechanacimano"></select>
</div>

JS

//hay que poblar selects de fecha
dia = $('#fechanacimdia');
mes = $('#fechanacimmes');
ano = $('#fechanacimano');
dia.append('<option>Día</option>');
for(i=1;i<=31;i++) {
    dia.append('<option value="'+i+'">'+i+'</option>');
}
meses = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"]
mes.append('<option>Mes</option>');
for(i=1;i<=12;i++) {
    mes.append('<option value="'+i+'">'+meses[i-1]+'</option>');
}
d = new Date();
year = d.getFullYear();
maxage = 100;
minage = 16;
ano.append('<option>Año</option>');
for(i=year-minage;i>=year-maxage;i--) {
    ano.append('<option value="'+i+'">'+i+'</option>');
}


//--------- validate ------------------------

$('#formulario').validate({
    rules: {
        fechanacimdia: { required: true },
        fechanacimmes: { required: true },
        fechanacimano: { required: true, validdate: true }
    },
    groups: {
        fechanacim: "fechanacimdia fechanacimmes fechanacimano"
    },
    messages: {
        fechanacimdia: "Fecha de nacimiento no es válida.",
        fechanacimmes: "Fecha de nacimiento no es válida.",
        fechanacimano: "Fecha de nacimiento no es válida."
    },
});
//funcion auxiliar para validar fecha de nacimiento correcta
jQuery.validator.addMethod("validdate", function(value, element) {
    var month = +$('#fechanacimmes').val() - 1; // Convert to numbers with "+" prefix
    var day = +$('#fechanacimdia').val();
    var year = +$('#fechanacimano').val();
    var date = new Date(year, month, day); // Use the proper constructor
    return date.getFullYear() == year && date.getMonth() == month && date.getDate() == day;
});

Answer 5

私の考えは、標準入力だけでなくjQuery validator、属性を持つものをすべて検証するように変更することでした。プラグインの修正版はこちらvalidateableから入手できます1.9.0

基本的に、新しい jquery バリデーターをインポートして、次のようにします。

<script>
$.validator.addMethod(
    "groupnotnull",
    function(value, element) {
        return $("input[type='text']:filled",element).length!=0;
    },
    function(regexp, element) {
      return "At least one input must be specified";
    }
);
</script>

<div validateable="true" name="groupValidated" groupnotnull="true">
    <input type="text" name="foo"/>
    <input type="text" name="blah"/>
</div>

必要な変更は、フォーム フィールドでのみ機能するためではなく、jQuery validatorそれを使用することでした。そして、要素の子にバインドするようにキーアップ ハンドラーなどを変更します。.attr('name').name.namevalidateable

これは、フィールドを単一のエンティティとしてではなく、相互に関連して検証できるという点で、グループよりも少し動的です。

Answer 6

必須フィールドのいずれかが空白の場合、このコードは 1 つの一般的なエラーを表示します。

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
$(document).ready(function(){
  $("#myform").validate({
    invalidHandler: function(form, validator) {
      var errors = validator.numberOfInvalids();
      if (errors) {
        var message ='You missed ' + errors + ' fields.';
        $("#messageBox").html(message);
        $("#messageBox").show();
      } else {
        $("#messageBox").hide();
      }
    },
    showErrors: function(errorMap, errorList) {

    },
    submitHandler: function() { alert("Submit!") }
 })
});  
</script>

</head>
<body>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<div id="messageBox"></div> 
<ul id="errorlist"></ul>
 <form id="myform" action="/loginurl" method="post"> 
   <label>DOB1</label> 
   <input name="dob1" class="required" /> 
   <label>DOB2</label> 
   <input name="dob2" class="required" /> 
   <label>DOB3</label> 
   <input name="dob3" class="required" />
   <br/>
   <input type="submit" value="Submit"/>
 </form>
</body>
</html>

Answer 7

いくつかのオプション: を確認してくださいerrorContainer。すべてのエラーを完全に別の<div>. invalidまたは、ブロックをチェックアウトして、errorMessage.show()コマンドを実行することもできます。