Jquery 表单验证不起作用（属性值错误？）

Question

I want to validate the form shown in the html code below (sorry for the overly indented code). When I run the code, only the email address validation works correctly. I want it so it also checks the other fields for their corresponding data types (eg name --> only text). I don't understand what I am doing wrong, perhaps I am using the wrong attributes in HTML or incorrect Jquery.

Code:

 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>

Answer 1

Of curse you need to use the plugin of jquery validation.

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)
    });