Jquery正则表达式模式未验证

Question

I'm working on a web page using Java servlets and JSPs. I'm currently having trouble with my login page using HTML forms and using Jquery for some quick client-side validation using regex patterns. I'm running and compiling on the latest version of Intellij ultimate.

When writing the validation using regex patterns and testing it the first time it worked perfectly fine and displayed the message only when it broke the regex pattern. Now, however, after starting my laptop back up it's saying my pattern is being broken even when I'm giving a valid input. I've tested my regex online and all my patterns are doing what I want them to.

For some reason it allows me to enter one character into the input field and it accepted it but any more than one character and it displays my message saying the pattern has been broken.

Is this a problem with the way I'm writing it or is it a bug with Jquery?

edit: after starting my laptop up again I'm now getting no validation at all, its as if its not detecting my javascript file.

I have my javascript written in a different file and have linked as so in the head along with the links to use Jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/additional-methods.min.js"></script>
<script src="form_validation.js"></script>

My form:

<form action="CreateAccount" method="post" name = "CreateAccountForm" id = "CreateAccountForm">
    <label for="firstname">First name:</label><br>
    <input type="text" id="firstname" name="firstname"><br>

    <label for="lastname">Last name:</label><br>
    <input type="text" id="lastname" name="lastname"><br>

    <label for="username">Username:</label><br>
    <input type="text" id="username" name="username"><br>

    <label for="password">Password</label><br>
    <input type="password" id="password" name="password"><br>

    <label for="phone">Phone Number</label><br>
    <input type="text" id="phone" name="phone"><br>

    <label for="email">Email</label><br>
    <input type="email" id="email" name="email"><br><br>

    <input type="submit" value="Submit">

</form>

My Jquery:

$(function () {
    $('CreateAccountForm').validate({
        rules: {
            firstname:{
                required:true,
                pattern: /^[a-zA-Z]+$/,
                maxlength: 50

            },
            lastname:{
                required:true,
                pattern: /^[a-zA-Z]+$/,
                maxlength: 50
            },
            username:{
                required:true,
                pattern: /^[^ ]+$/,
                maxlength: 50
            },
            password:{
                required:true,
                pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,15}$/
            },
            phone:{
                required:true,
                pattern: /^\d{2}-\d{4}-\d{7}$/
            },
            email:{
                required:true,
                email:true,
                maxlength: 50
            }

        },
        messages:{
            firstname:{
                required: " A first name is required",
                pattern: " First name must only contain characters a-z",
                maxlength: "Must be less than 50 characters"


            },
            lastname:{
                required: " A last name is required",
                pattern: " Last name must only contain characters a-z",
                maxlength: "Must be less than 50 characters"
            },
            username:{
                required: " A user name is required",
                pattern: " User name cannot have spaces",
                maxlength: "Must be less than 50 characters"
            },
            password:{
                required: " A password is required",
                pattern: " Password must contain: " +
                    "At least one upper case letter, " +
                    "At least one lower case letter, " +
                    "At least one number " +
                    "and be between 8-15 characters."
            },
            phone:{
                required: " A phone number is required",
                pattern: " Phone number must be in the format **-****-*******"
            },
            email:{

                required: " An email is required",
                email: " Not a valid email address format",
                maxlength: "Must be less than 50 characters"
            }

        }

    })

})

Answer 1

As per the documentation there is no max_length validation, the correct one to use is maxlength . So something like this:

        firstname:{
            required:true,
            pattern: /^[a-zA-Z]+$/,
            maxlength: 50
        }, // etc.