Jqueryカスタムフォーム検証

Question

カスタム検証フォームを作成したいと思いますが、それを行う方法はわかりません。フォームの提出時に、入力が空の場合は、 "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'); 
     } 
    }); 
    });   
    });