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 >
    <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>

CodePudding user response：

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 >
    <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>