Validation different message on the condition in password?

Hi i would like some help on my password field where i have this 2 type of validation message

first if the input for password when user click on submit button it be display please enter password!

2nd if the input for password is incorrect where it didnt meeet the requirement it display password do not meet the requirement!

Here my code for my html for the password and submit button

                                <div class="form-group row">
                                <label for="validationpassword" class="col-form-label passwordadduser">*Password:</label>
                                <div class="col-6 d-flex">
                                <input name="validationpassword" onChange="onChange()" type="password" class="form-control pass" id="password" placeholder="Password"  required>
                                <i class="bi bi-eye-slash" id="togglePassword"></i>
                                <div style="margin-left: 15px;" class="invalid-tooltip password-empty" hidden>
                                    Enter a password!
                                </div>
                                <div style="margin-left: 15px;" class="invalid-tooltip password-notmeet" hidden>
                                    Password do not meet the requirement!
                                </div>
                                </div>
                            </div>

                        <button type="submit" class="btn-primary submitbutton">Add</button>

I have try a Jquery/JavaScript but seems not working i think i doing something wrong here

var empty = $(document.getElementById("password").value == '')
 if (empty){
 $('.pass').removeAttr('hidden');
 }
 else{

 $('.pass').attr('hidden', '');
 }

needed help as i not familiar with how the input should work ?