728x90
반응형
아이디를 입력하는 칸과 전송버튼을 만들고,
아이디칸에 아무것도 입력되지 않았을 때는 경고창이 뜨도록 만들어 보자.
폼에 입력된 값은
$('요소명').value로 알 수 있다.
$('.btn-primary').on('click',function(){
if($("#user-id").val().length==0){
alert("아이디를 입력하셔야죠");
return false;
}
});
btn-primary 클래스를 가진 요소를 클릭했을 때
#user-id의 값의 길이가 0이라면 "아이디를 입력하셔야죠" 알림창 뜨게 하기.
if-else문은 우리가 C언어,자바 등등에서 사용하는 그 if문과 같다고 보면 된다.
추가로,
form태그에서 submit이벤트가 발생하기 때문에
$('form').on('submit',function(){
if($("#user-id").val().length==0){
alert("아이디를 입력하셔야죠");
return false;
}
});
이렇게 작성해도 된다.
만약 아이디가 입력되지 않았을 때 폼 전송을 막으려면
$('form').on('submit',function(e){
if($("#user-id").val().length==0){
alert("아이디를 입력하셔야죠");
e.preventDefault();
}
});
이벤트리스너 콜백함수에 e라는 파라미터를 추가하고
e.preventDefault()메소드를 쓰면 된다.
728x90
반응형
'웹개발 > JavaScript' 카테고리의 다른 글
[자바스크립트] 변수를 이용하여 다크모드 버튼 만들어 보기 (0) | 2023.01.19 |
---|---|
[자바스크립트] 모달창 띄우기와 간단한 애니메이션 (0) | 2023.01.18 |
[자바스크립트] jQuery 라이브러리 사용하기 (0) | 2023.01.16 |
[자바스크립트] 서브메뉴 만들기 (0) | 2023.01.16 |
[자바스크립트] 알림창 띄우기, 이벤트리스너 (0) | 2023.01.16 |
댓글