JQuery Проверять несколько полей с одной ошибкой

Ответ 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);
   }
});

Ответ 2

Вы можете использовать группу, чтобы группировать входы. Если каждый из входов имеет сообщение об ошибке, будет отображаться только один.

Вероятно, вы захотите переопределить сообщения, связанные с каждым из полей, поэтому они будут иметь больше смысла. Например, по умолчанию вы можете получить сообщение об ошибке типа "Это поле обязательно". Ну, это не делает пользователя много хорошего, когда есть три входа. Вероятно, вы хотите переопределить сообщение, чтобы сказать "Требуется локальный номер". В этом примере я просто перевернул все сообщения об ошибках с помощью "Пожалуйста, введите действительный номер телефона".

<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"
  }
},

Ответ 3

Я думал, что должен поделиться этим. Полный код, который работал у меня.

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

это для части 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>

Это script я used:

$(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 может быть настроена по своему усмотрению. Я использовал этот сложный макет, потому что мне нужно было добавить это поле в уже существующую форму. Но это пример, который работает! Надеюсь, это поможет кому угодно!

Ответ 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, потому что .name работает только с полями формы. И измените обработчики ключа и т.д., Чтобы привязать их к дочерним элементам validateable.

Это немного более динамично, чем группы, поскольку он позволяет проверять поля по отношению друг к другу, а не как отдельные объекты.

Ответ 6

Этот код отобразит одну общую ошибку, если какое-либо из обязательных полей пустое.

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

Ответ 7

Пара вариантов: проверьте errorContainer. Вы можете сделать все ошибки полностью разделенными <div>. Или вы можете проверить блок invalid и просто иметь команду errorMessage.show().