Блог

Я пытаюсь написать цикл 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 amp;amp; 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,
.....