Jquery custom Form Validation

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

Я не проверял, но вы хотите что-то вроде этого. Во-первых, вы должны добавить идентификатор кнопки и 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'); 
     } 
    }); 
    });   
    });