web-dev-qa-db-ja.com

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

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

jqueryjquery-validate
55
Ian Hoar

クリスに似ている

$("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);
   }
});
54
Jules

グループオプションを使用して、入力をグループ化できます。各入力にエラーメッセージがある場合、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"
  }
},
13
Chris

これを共有すべきだと思いました。私のために働いた完全なコード。

[〜＃〜] 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;
});
4
Naoise Golden

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

3
inadcod

私の考えは、_jQuery validator_を変更して、標準入力と同様にvalidateable属性を持つすべてのものを検証することでした。プラグインの_1.9.0_変更バージョンを取得できます here

基本的に、新しい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_で必要な変更は、_.name_ではなく.attr('name')を使用するようにすることでした。なぜなら、_.name_はフォームフィールドでのみ機能するからです。キーアップハンドラーなどを変更して、validateable要素の子にバインドします。

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

2
matsondawson

必須フィールドのいずれかが空白の場合、このコードは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>
1
sweets-BlingBling

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

0
Jarrett Meyer