2016-07-11 8 views
1

フォームで作業しています。入力フィールドが空でない場合、アラートが表示されます。エラーが発生すると(空のフィールドが送信されます)、入力にクラスが追加され、スタイルが適用されます。jqueryを使用して条件が確認されたときにアラートを表示します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<script> 
 
    $(document).ready(function() { 
 
     $(".form-register").submit(function (e) { 
 

 
      e.preventDefault(); 
 

 
      if($(this).find('.error')){ 
 
       $(".error").animate({'margin-left': '0'}); 
 
       $(this).find('input').removeClass('error'); 
 
       $(this).find('select').removeClass('error'); 
 
      } 
 

 
      var email = $(this).find('input[name="email"]').val(); 
 
      if(!email){ 
 
       $(this).find('input[name="email"]').addClass('error'); 
 
       alert('Email can not be empty'); 
 
      } 
 

 
      var name = $(this).find('input[name="name"]').val(); 
 
      if(!name){ 
 
       $(this).find('input[name="name"]').addClass('error'); 
 
       alert('Name can not be empty'); 
 
      } 
 

 
      if($(this).find('.error')){ 
 
       $(".error").animate({'margin-left': '15px'}); 
 
      }else{ 
 
       alert('No error has been detected.'); 
 
      } 
 

 
     }); 
 
    }); 
 

 
</script> 
 

 
<style> 
 
    .form-register input.error { 
 
     border:1px solid #F5192F; 
 
     box-shadow:0 0 4px #F5192F; 
 
    } 
 
</style> 
 

 
<form class="form-register" method="post" action=""> 
 
    <input name="email" type="text"/> 
 
    <input name="name" type="text"/> 
 
    <input type="submit"/> 
 
</form>

私は、フィールドが空でない警告が、決してを表示したいです。親切にも私はこの問題を解決するのに役立ちます。ありがとう

答えて

2

if($(this).find('.error')) {は、クラスエラーのある要素がフォームに存在しない場合でも常に真です.jQueryは空の配列を返します。コードif($(this).find('.error').length > 0){に変更して、警告alert('No error has been detected.')を表示します。

関連する問題