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