minsung

completet color change when validation failed

...@@ -40,28 +40,16 @@ function checkValidation(self){ ...@@ -40,28 +40,16 @@ function checkValidation(self){
40 40
41 } 41 }
42 42
43 -function focusFunction(id) { 43 +$('#eValidation').keyup(function () {
44 -document.getElementById(id).focus(); 44 + var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
45 -}
46 45
47 -function blurFunction(id) { 46 + if (re.test($(this).val())) {
48 - document.getElementById(id).style.borderColor="2px solid";
49 - document.getElementById(id).style.borderColor="red";
50 -}
51 47
52 -function validate(self){ 48 + $(this).css("borderColor", "green");
53 - var email=document.getElementById('eValidation').value;
54 - var regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
55 - var fpassword=document.getElementById('fValidation').value;
56 - var spassword= document.getElementById('sValidation').value;
57 - var x = document.getElementById(".inputset");
58 - $(document).ready(function(){
59 - if(regExp.test(email)){
60 - return true;
61 - }else if(email=""){
62 49
63 - return false; 50 + } else {
64 - }else return true;
65 51
66 - }); 52 + $(this).css("borderColor", "red");
67 -} 53 + }
54 +});
55 +});
......
...@@ -10,6 +10,23 @@ ...@@ -10,6 +10,23 @@
10 </script> 10 </script>
11 <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"> 11 <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js">
12 </script> 12 </script>
13 +<script type="text/javascript">
14 +
15 +$(document).ready(function () {
16 + $('#eValidation').keyup(function () {
17 + var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
18 +
19 + if (re.test($(this).val())) {
20 +
21 + $(this).css("borderColor", "green");
22 +
23 + } else {
24 +
25 + $(this).css("borderColor", "red");
26 + }
27 + });
28 +});
29 +</script>
13 </head> 30 </head>
14 <body> 31 <body>
15 32
...@@ -37,7 +54,7 @@ ...@@ -37,7 +54,7 @@
37 54
38 <label for="password">비밀번호 확인:</label><br> 55 <label for="password">비밀번호 확인:</label><br>
39 <input class="inputset" id="sValidation" type="password" name="checkpassword" placeholder="비밀번호를 입력하세요." ><br> 56 <input class="inputset" id="sValidation" type="password" name="checkpassword" placeholder="비밀번호를 입력하세요." ><br>
40 - 57 + <span id='message'></span>
41 58
42 <label for="name">이름:</label><br> 59 <label for="name">이름:</label><br>
43 <input class="inputset"type="text" name="name" placeholder="이름을 입력하세요." ><br> 60 <input class="inputset"type="text" name="name" placeholder="이름을 입력하세요." ><br>
......