◈ alert 없이 메세지 출력
🐧Form Event
🎨[회원가입]을 클릭한 경우 호출될 이벤트 처리 함수 등록
→ 사용자 입력값을 검증하고 모든 입력값에 대한 검증이 성공한 경우 제출 이벤트(Submit Event) 발생 - form 태그 실행
📌(selector).submit() : 선택자로 검색된 태그(form)로 제출 이벤트를 발생하는 메소드
$("#submitBtn").click(function() { $(".error").text("");//모든 입력태그의 에러 메세지에 대한 초기화 처리 // if($("#id").val()=="") { $("#idMsg").text("아이디를 입력해 주세요."); $("#id").focus(); return; } if($("#passwd").val()=="") { $("#passwdMsg").text("비밀번호를 입력해 주세요."); $("#passwd").focus(); return; } if($("#name").val()=="") { $("#nameMsg").text("이름을 입력해 주세요."); $("#name").focus(); return; } if($("#email").val()=="") { $("#emailMsg").text("이메일을 입력해 주세요."); $("#email").focus(); return; } $("#joinForm").attr("action", "20_form_event.html"); $("#joinForm").attr("method", "post"); // //$(selector).submit() : 선택자로 검색된 태그(form)로 제출 이벤트를 발생하는 메소드 $("#joinForm").submit(); });
🎨↑랑 같은 결과지만 에러메세지를 한번에 출력
$("#submitBtn").click(function() { $(".error").text(""); // //검증 관련 상태를 저장하기 위한 변수 - false : 검증 실패, true : 검증 성공 var result=true; // if($("#id").val()=="") { $("#idMsg").text("아이디를 입력해 주세요."); result=false; } if($("#passwd").val()=="") { $("#passwdMsg").text("비밀번호를 입력해 주세요."); result=false; } if($("#name").val()=="") { $("#nameMsg").text("이름을 입력해 주세요."); result=false; } if($("#email").val()=="") { $("#emailMsg").text("이메일을 입력해 주세요."); result=false; } if(!result) return;//검증이 실패한 경우 이벤트 처리 함수 종료 // $("#joinForm").attr("action", "20_form_event.html"); $("#joinForm").attr("method", "post"); // $("#joinForm").submit(); });
🎨회원가입 버튼을 안눌러도 에러 메세지 출력
📌$(selector).blur(callback) : 선택자로 검색된 태그(입력태그)에서 입력촛점이 다른 태그로 이동된 경우 콜백함수를 호출하는 메소드
→ focuout 메소드와 동일
$("#id").blur(function() { if($("#id").val()=="") { $("#idMsg").text("아이디를 입력해 주세요."); return; } $("#idMsg").text(""); });
🎨[다시입력]을 클릭한 경우 호출될 이벤트 처리 함수 등록
→ 모든 입력태그의 입력값 및 에러 메세지에 대한 초기화 처리
📌$(selector).val(value) : 선택자로 검색된 태그(입력태그)의 입력값을 변경하는 메소드
$("#id").val("");※입력태그 초기화 처리(아이디,비밀번호,이름,이메일을 하나씩 추가해야함)
─────────────────────────────────────📌$(selector).reset() : 선택자로 검색된 태그(form 태그)의 모든 입력태그를 초기화 처리
$("#joinForm")[0].reset();※↑랑 다르게 일괄처리 가능
─────────────────────────────────────$("#resetBtn").click(function() { //$(selector).val(value) : 선택자로 검색된 태그(입력태그)의 입력값을 변경하는 메소드 //$("#id").val("");//입력태그 초기화 처리(아이디,비밀번호,이름,이메일을 하나씩 추가해야함) // //$(selector).reset() : 선택자로 검색된 태그(form 태그)의 모든 입력태그를 초기화 처리 $("#joinForm")[0].reset();//↑랑 다르게 일괄처리 가능 // $(".error").text(""); $("#id").focus(); });
📃20_form_event.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <style type="text/css"> fieldset { width: 800px; margin: 10px auto; } legend { font-size: 1.2em; } #joinForm ul li { list-style-type: none; margin: 15px 0; } #joinForm label { width: 100px; text-align: right; float: left; margin-right: 10px; } #btnFs { text-align: center; } .error { color: red; margin-left: 10px; } </style> </head> <body> <h1>Form Event</h1> <hr> <form id="joinForm"> <fieldset> <legend>회원가입정보</legend> <ul> <li> <label for="id">아이디</label> <input type="text" name="id" id="id"> <span id="idMsg" class="error"></span> </li> <li> <label for="passwd">비밀번호</label> <input type="password" name="passwd" id="passwd"> <span id="passwdMsg" class="error"></span> </li> <li> <label for="name">이름</label> <input type="text" name="name" id="name"> <span id="nameMsg" class="error"></span> </li> <li> <label for="email">이메일</label> <input type="text" name="email" id="email"> <span id="emailMsg" class="error"></span> </li> </ul> </fieldset> <fieldset id="btnFs"> <button type="button" id="submitBtn">회원가입</button> <button type="button" id="resetBtn">다시입력</button> </fieldset> </form> <!-- alert 없이 메세지 출력 --> <script type="text/javascript"> $("id").focus(); // /* //[회원가입]을 클릭한 경우 호출될 이벤트 처리 함수 등록 //→ 사용자 입력값을 검증하고 모든 입력값에 대한 검증이 성공한 경우 제출 이벤트(Submit Event) 발생 - form 태그 실행 $("#submitBtn").click(function() { $(".error").text("");//모든 입력태그의 에러 메세지에 대한 초기화 처리 // if($("#id").val()=="") { $("#idMsg").text("아이디를 입력해 주세요."); $("#id").focus(); return; } if($("#passwd").val()=="") { $("#passwdMsg").text("비밀번호를 입력해 주세요."); $("#passwd").focus(); return; } if($("#name").val()=="") { $("#nameMsg").text("이름을 입력해 주세요."); $("#name").focus(); return; } if($("#email").val()=="") { $("#emailMsg").text("이메일을 입력해 주세요."); $("#email").focus(); return; } $("#joinForm").attr("action", "20_form_event.html"); $("#joinForm").attr("method", "post"); // //$(selector).submit() : 선택자로 검색된 태그(form)로 제출 이벤트를 발생하는 메소드 $("#joinForm").submit(); }); */ //↑랑 같은 결과지만 에러메세지를 한번에 출력 $("#submitBtn").click(function() { $(".error").text(""); // //검증 관련 상태를 저장하기 위한 변수 - false : 검증 실패, true : 검증 성공 var result=true; // if($("#id").val()=="") { $("#idMsg").text("아이디를 입력해 주세요."); result=false; } if($("#passwd").val()=="") { $("#passwdMsg").text("비밀번호를 입력해 주세요."); result=false; } if($("#name").val()=="") { $("#nameMsg").text("이름을 입력해 주세요."); result=false; } if($("#email").val()=="") { $("#emailMsg").text("이메일을 입력해 주세요."); result=false; } if(!result) return;//검증이 실패한 경우 이벤트 처리 함수 종료 // $("#joinForm").attr("action", "20_form_event.html"); $("#joinForm").attr("method", "post"); // $("#joinForm").submit(); }); //회원가입 버튼을 안눌러도 에러 메세지 출력 //$(selector).blur(callback) : 선택자로 검색된 태그(입력태그)에서 입력촛점이 다른 태그로 이동된 경우 콜백함수를 호출하는 메소드 //→ focuout 메소드와 동일 $("#id").blur(function() { if($("#id").val()=="") { $("#idMsg").text("아이디를 입력해 주세요."); return; } $("#idMsg").text(""); }); //[다시입력]을 클릭한 경우 호출될 이벤트 처리 함수 등록 //→ 모든 입력태그의 입력값 및 에러 메세지에 대한 초기화 처리 $("#resetBtn").click(function() { //$(selector).val(value) : 선택자로 검색된 태그(입력태그)의 입력값을 변경하는 메소드 //$("#id").val("");//입력태그 초기화 처리(아이디,비밀번호,이름,이메일을 하나씩 추가해야함) // //$(selector).reset() : 선택자로 검색된 태그(form 태그)의 모든 입력태그를 초기화 처리 $("#joinForm")[0].reset();//↑랑 다르게 일괄처리 가능 // $(".error").text(""); $("#id").focus(); }); </script> </body> </html>
