Jquery 사용자 지정 양식 유효성 검사

Question

사용자 지정 유효성 검사 양식을 만들고 싶습니다만 어떻게 해야할지 잘 모릅니다. 양식 제출시 input이 비어있는 경우 "warning_red"클래스를 입력에 추가하려고합니다. 또한 입력 요소의 자리 표시자를 제거하고 "필수"텍스트로 바꾸고 싶습니다. 나는 그것을 달성 할 수 있지만 "필수"를 사용하여 내 HTML 있지만 jQuery 길을 알고 싶습니다. 누군가가 도울 수 있기를 바랍니다. 여기

내 코드입니다 :

HTML :

<div class="wrapper"> 
     <form action="#" method="post"> 
      <label for="username">Username</label> 
      <input type="text" name="username" id="username" placeholder="Name"> 
      <br> 
      <label for="lastname">Last Name</label> 
      <input type="text" name="lastname" id="lastname" placeholder="Last Name"> 
      <br> 
      <label for="email">Email</label> 
      <input type="email" name="email" id="email" placeholder="Email"> 
      <br> 
      <label for="phone">Phone</label> 
      <input type="tel" name="phone" id="phone" placeholder="Phone"> 
      <br> 
      <input type="submit" value="Submit" id="submit_btn"> 
     </form> 
</div> 

CSS 코드 :

* { 
    padding:0px; 
    margin:0px; 
    box-sizing: border-box; 
} 

body { 
font-family: sans-serif; 
} 

.wrapper { 
    width:500px; 
    margin:0 auto; 
    text-align: center; 
} 

label { 
    width:100px; 
    float:left; 
    padding:9px; 
    margin-top:20px; 
} 

input { 
    width:300px; 
    padding:10px; 
    margin-top:20px; 
} 

input[type="submit"] { 
    width:200px; 
    margin:20px 0; 
} 


.warning_red { 
    color:#ff0000; 
    background:#d89d9d; 
} 

jQuery를 코드 :

$(function(){ 
     $("#submit_btn").on("click", function(){ 
      var texta = $(".wrapper").find("input"); 
     if (texta.val()==="") { 
      texta.addClass("warning_red"); 
      } 
     }); 
    }); 

Answer 1

나는 그것을 테스트하지 않은하지만 당신이 원하는 이 같은. 첫째 버튼에 ID를 추가해야하고, JQuery와이

<div class="wrapper" id="id1"> 

    $(document).ready(function() { 
      $("#SubmitButton").click(function() { 

      var text = $('div#id1'); 
     text.find('input').each(function() { 
      if(!$(this).val()) 
      { 
       text.addClass("warning_red"); 
      } 
      }); 
      }); 
      }); 

Answer 2

html로 같은 것입니다 :

<div class="wrapper"> 
    <form action="#" method="post"> 
     <label for="username">Username</label> 
     <input class="vaildation_available" type="text" name="username" id="username" placeholder="Name"> 
     <br> 
     <label for="lastname">Last Name</label> 
     <input class="vaildation_available" type="text" name="lastname" id="lastname" placeholder="Last Name"> 
     <br> 
     <label for="email">Email</label> 
     <input class="vaildation_available" type="email" name="email" id="email" placeholder="Email"> 
     <br> 
     <label for="phone">Phone</label> 
     <input class="vaildation_available" type="tel" name="phone" id="phone" placeholder="Phone"> 
     <br> 
     <input type="submit" id="submit_btn" value="Submit"> 
    </form> 

JS :

$(document).ready(function() { 
    $("#submit_btn").click(function() { 
    $('.vaildation_available').each(function() { 
     if($(this).val() == ''){ 
     $(this).addClass('warning_red'); 
     } 
    }); 
    });   
    });