Проверка формы Jquery не работает (неправильные значения атрибутов?)

#javascript #html #jquery

Вопрос:

Я хочу проверить форму, показанную в приведенном ниже html-коде (извините за слишком большой отступ кода). Когда я запускаю код, корректно работает только проверка адреса электронной почты. Я хочу, чтобы он также проверял другие поля на наличие соответствующих типов данных (например, имя —> только текст). Я не понимаю, что я делаю неправильно, возможно, я использую неправильные атрибуты в HTML или неверный Jquery.

Код:

 function validateForm(){
    $('#form').validate({
        rules: {
            name: {
                required: true
                name: true
            },
            age: {
                required: true
                number: true
            },
            city: {
                required: true
                lettersonly: true
            },
            email: {
                required: true
                email: true
            },
            phone-number: {
                required: true
                number: true
            }
        }
    })
}

$(function() {
    document.getElementById('submit-btn').addEventListener('click', validateForm, true)
});

 <form id="form">
                <div class="form-group">
                    <label for="name">Name</label>
                    <input class="form-control" type="text" id="name" name="name" placeholder="First and last name" />
                </div>
                <div class="form-group">
                    <label for="age">Age</label>
                    <input class="form-control" type="text" id="age" name="age" placeholder="Age" />
                </div>
                <div class="form-group">
                    <div class="form-group">
                        <label for="city">City</label>
                        <input class="form-control" type="text" id="city" name="city" placeholder="City" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input class="form-control" type="email" id="email" name="email" placeholder="Email address" />
                </div>
                <div class="form-group">
                    <label for="phone-number">Phone number</label>
                    <input class="form-control" type="text" id="phone-number" name="phone-number" placeholder="Phone number" />
                </div>

                <button class="btn btn-primary" id="submit-btn">Submit</button>
                <button class="btn btn-primary" id="erase-btn">Erase</button>

</form>

Ответ №1:

Конечно, вам нужно использовать плагин проверки jquery.

 function validateForm(){
        $('#form').validate({
            rules: {
                name: {
                    required: true,
                    name: true
                },
                age: {
                    required: true,
                    number: true
                },
                city: {
                    required: true,
                    lettersonly: true
                },
                email: {
                    required: true,
                    email: true
                },
                ['phone-number']: {
                    required: true,
                    number: true
                }
            }
        })
    }
    
    $(function() {
        document.getElementById('submit-btn').addEventListener('click', validateForm, true)
    });