我正在尝试编写一个for循环,该循环将元素添加到我的validate
方法中。
我想遍历以user_input
开头的每个输入元素,并将其添加到我的rules
和messages
对象中。
它应该在我的对象中添加以下元素:
user_number_X {
checkLotteryNumber: true,
required: true
}
但是它应该看起来像:
user_number_1: {
checkLotteryNumber: true,
required: true
},
user_number_2: {
checkLotteryNumber: true,
required: true
},
user_number_3: {
checkLotteryNumber: true,
required: true
},
这是我的index.html
<form class="user-input">
<div class="input-wrapper">
<div class="number-wrapper">
<label for="user_number_1">1st number</label>
<input id="user_number_1" class="lottery-number" name="user_number_1" type="number" maxlength="2" required>
<span class="focus-border">
<i></i>
</span>
</div>
<div class="number-wrapper">
<label for="user_number_2">2nd number</label>
<input id="user_number_2" class="lottery-number" name="user_number_2" type="number" maxlength="2" required>
<span class="focus-border">
<i></i>
</span>
</div>
<div class="number-wrapper">
<label for="user_number_3">3rd number</label>
<input id="user_number_3" class="lottery-number" name="user_number_3" type="number" maxlength="2" required>
<span class="focus-border">
<i></i>
</span>
</div>
<div class="number-wrapper">
<label for="user_number_4">4th number</label>
<input id="user_number_4" class="lottery-number" name="user_number_4" type="number" maxlength="2" required>
<span class="focus-border">
<i></i>
</span>
</div>
<div class="number-wrapper">
<label for="user_number_5">5th number</label>
<input id="user_number_5" class="lottery-number" name="user_number_5" type="number" maxlength="2" required>
<span class="focus-border">
<i></i>
</span>
</div>
<div class="number-wrapper">
<label for="user_number_6">6th number</label>
<input id="user_number_6" class="lottery-number" name="user_number_6" type="number" maxlength="2"required>
<span class="focus-border">
<i></i>
</span>
</div>
<div class="number-wrapper">
<label for="user-draw">Number of draws</label>
<input id="user-draw" class="draw-number" name="draw_number" type="number" required>
<span class="focus-border">
<i></i>
</span>
</div>
</div>
<div class="submit-button">
<button id="button-send_results" class="submit" type="submit">Let's win!</button>
</div>
</form>
我的js文件:
$.validator.addMethod("checkLotteryNumber", function(value, element) {
return this.optional(element) || value > 0 && value <= 52;
}, 'Please, write numbers from 1 to 52 only');
$.validator.addMethod("checkDrawsNumber", function(value, element) {
return this.optional(element) || value < 100000;
}, 'You can play not more than 99.999 draws');
var rules = {
draw_number: {
checkDrawsNumber: true,
required: true
}
}
var numberCheck = function() {
$("input[id^='user_number']").each(function() {
rules[$(this.id)] = {
checkLotteryNumber: true,
required: true
};
});
}
console.log(rules);
numberCheck();
var messages = {
draw_number: {
checkDrawsNumber: 'You can play not more than 99.999 draws',
required: 'This field is required'
}
};
var drawsCheck = function() {
$("input[id^='user_number']").each(function() {
messages[$(this.id)] = {
checkLotteryNumber: 'Please, write numbers from 1 to 52 only',
required: 'This field is required'
};
});
}
console.log(messages);
drawsCheck()
$('form.user-input').validate({
rules: rules,
messages: messages,
.....