Quiero hacer un programa que, si no ingreso mi ID o contraseña, aparezca una alerta, y si mi contraseña tiene menos de 6 caracteres, aparezca una alerta.
Cuando ejecuté este código, siempre aparecían las alertas 'Complete el espacio en blanco' e 'Ingrese la contraseña con al menos 6 caracteres', incluso si escribo letras en los cuadros de ID y contraseña. Si la condición es falsa, no se deben mostrar las alertas, pero ¿por qué aparece? No sé cuál es el problema.
<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>siempre declare variables dentro de la función, y no olvide agregar una declaración de retorno dentro de la declaración IF para detener la función si se cumple cierta validación. Espero que esto sea lo que esperas.
$('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>