[英]Validate multiple fields with Parsley?
I have three text input fields used for entering a date. 我有三个用于输入日期的文本输入字段。 I'd like to validate these to make sure they are, together, a valid date. 我想验证这些,以确保它们一起是一个有效的日期。 I can write JavaScript to test that something is a date, but I can't see a way to use Parsley.js to validate multiple fields in one go, and provide a single error message. 我可以编写JavaScript来测试某些东西是一个日期,但我看不到使用Parsley.js一次验证多个字段的方法,并提供单个错误消息。
My fields are like this: 我的字段是这样的:
<input type="number" name="date-day" value="" maxlength="2">
<input type="number" name="date-month" value="" maxlength="2">
<input type="number" name="date-year" value="" maxlength="4">
From this answer I suspect the answer is that this isn't (simply) possible, but it seems like quite a common need, so I'd like to be 100% sure! 从这个答案我怀疑答案是,这不是(简单)可能,但它似乎是一个非常普遍的需要,所以我想100%肯定!
Here's roughly what I've ended up with. 这大致是我最终得到的结果。 This is my HTML now: 这是我的HTML现在:
<input type="number" name="dob-day" value="" maxlength="2" class="js-dob-day" required="required" data-parsley-date="js-dob">
<input type="number" name="dob-month" value="" maxlength="2" class="js-dob-month">
<input type="number" name="dob-year" value="" maxlength="4" class="js-dob-year">
I've added a unique class for each field, so I can get their values. 我为每个字段添加了一个唯一的类,因此我可以获得它们的值。 And added required
and data-parsley-date
to the day input. 并在日输入中添加了required
和data-parsley-date
。
Here's my JavaScript to add a validator that checks the combined fields to see if they make a valid date. 这是我添加验证器的JavaScript,它会检查组合字段以查看它们是否生成有效日期。 I've included two utility functions used within the validator, for completeness. 为了完整性,我在验证器中包含了两个实用程序函数。 The validator relies on moment.js to check the final string for validity. 验证器依赖于moment.js来检查最终字符串的有效性。
// Is `n` a number or numeric string (eg "3")?
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
};
// Pad `n` with `z` (or `0` by default) to `width`.
function zeroPad(n, width, z) {
z = z || '0';
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
};
window.ParsleyValidator
.addValidator(
// Name of our validator.
'date',
// `value` will be the value entered into the day field.
// `requirements` will be "js-dob" in our example.
function(value, requirements) {
var day = $('.'+requirements+'-day').val(), // or value
month = $('.'+requirements+'-month').val(),
year = $('.'+requirements+'-year').val();
if (isNumeric(day) === false
|| isNumeric(month) === false
|| isNumeric(year) === false) {
return false;
};
day = zeroPad(day, 2);
month = zeroPad(month, 2);
year = zeroPad(year, 4);
// Use moment.js to make a date which we can then test for validity.
var date = moment(year+'-'+month+'-'+day, 'YYYY-MM-DD');
if (date.isValid()) {
return true;
} else {
return false;
};
},
// priority. Not sure how this works.
34
)
.addMessage('en', 'date', "Enter a valid date");
Any suggestions more than welcome! 任何建议超过欢迎!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.