如果我不输入我的 ID 或密码，弹出警报的代码有什么问题？

Question

I want to make a program that If I don't enter my ID or password, an alert pops up, and if my password is less than 6 characters, an alert pops up.

When I ran this code, the 'Fill in the blank' and 'Enter the password with at least 6 characters' alerts always appeared even if I type letters in the ID and password boxes. If the condition is false, the alerts should not be displayed, but why does it appear? I don't know what the problem is.

    <form action="success.html">
    
    <div class = "my-3">
    <input type = "text" class = "form-control" id="id" placeholder="Fill in the blank">
    </div>
<div class="my-3">
    <input type = "password" class = "form-control" id="pw" placeholder="Enter the password with at least 6 characters">
</div>

<button type = "submit" class = "btn btn-primary">전송</button>
<button type = "button" class = "btn btn-danger" id="close">닫기</button>

</form>

<script>
        var Text1 = $('#id').val();
        var Password1 = $('#pw').val();
        var passwordLength = $('#pw').val().length;
       
        $('form').on('submit', function() {
            if ( Text1 == '' || Password1 == '') {
            alert('Fill in the blank')
            }
          
            if (passwordLength < 6){
            alert('Enter the password with at least 6 characters')
            }
        }
        )
        
    </script>

Answer 1

always declare variables inside the function, and don't forget to add a return statement inside the IF statement to stop the function if certain validation is met. Hope this is what you expect.

 $('form').on('submit', function() { //Declare variables inside function var Text1 = $('#id').val(); var Password1 = $('#pw').val(); var passwordLength = $('#pw').val().length; if (Text1 == '' || Password1 == '') { alert('Fill in the blank'); return false;//use return statement } if (passwordLength < 6){ alert("Enter the password with at least 6 characters"); return false; } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="success.html"> <div class = "my-3"> <input type = "text" class = "form-control" id="id" placeholder="Fill in the blank"> </div> <div class="my-3"> <input type = "password" class = "form-control" id="pw" placeholder="Enter the password with at least 6 characters"> </div> <button type = "submit" class = "btn btn-primary">전송</button> <button type = "button" class = "btn btn-danger" id="close">닫기</button> </form>