2013-04-14 1 views
0

У меня есть текст зоны, когда я нажимаю save, если сообщение пусто, появляется окно с ошибкой. Но если я создаю два текстовых поля, сообщение появляется в двух областях. Как их отличить? Я пытаюсь с id, который не работает.разное сообщение оповещения в двух вводах

http://gyazo.com/5ae3f1bd82ac829094c3ca567882b3f2

Это мой код:

<body> 
<div class="container"> 
    <form id="messageAbsence"> 
     <div class="control-group"> 
       <div class="controls"> 
        <label class="form-horizontal"> 
         <textarea class="span10" id="text1"></textarea> 
         <button class="btn" id="1">Sauvegarder</button> 
        </label> 

        <div class="alert alert-error hide"> 
         <h4 class="alert-heading">Erreur !</h4> 
        Vous devez entrer au moins 4 caractères et au plus 200 caractères ! 
        </div> 
        <div class="alert alert-info hide"> 
         <h4 class="info-heading">Succes!</h4> 
         Message bien enregistré. 
        </div> 
       </div> 
     </div> 
    </form> 
    <form id="redirect"> 
     <div class="control-group"> 
       <div class="controls"> 
        <label class="form-horizontal"> 
         <textarea class="span10" id="text2"></textarea> 
         <button class="btn" id="2">Sauvegarder</button> 
        </label> 

        <div class="alert alert-error hide"> 
         <h4 class="alert-heading">Erreur !</h4> 
        Vous devez entrer au moins 4 caractères et au plus 200 caractères ! 
        </div> 
        <div class="alert alert-info hide"> 
         <h4 class="info-heading">Succes!</h4> 
         Message bien enregistré. 
        </div> 
       </div> 
     </div> 
    </form> 
</div> 

<

!--message error test trop court ou trop long --> 
<script type="text/javascript"> 

    $(function(){ 
     $("#1").click(function(){ 
     if($("#text1").val().length < 4 || $("#text1").val().length > 200){ 
      $("div.alert-error").show("slow").delay(4000).hide("slow"); 
      return false; 
     } 
     else 
     { 
      $("div.alert-info").show("slow").delay(4000).hide("slow"); 
       return false; 
     } 
     }); 
    }); 

    $(function(){ 
     $("#2").click(function(){ 
     if($("#text2").val().length < 4 || $("#text2").val().length > 200){ 
      $("div.alert-error").show("slow").delay(4000).hide("slow"); 
      return false; 
     } 
     else 
     { 
      $("div.alert-info").show("slow").delay(4000).hide("slow"); 
       return false; 
     } 
     }); 
    }); 
</script> 

ответ

0

Попробуйте это:

$(function() { 
    $("#1").click(function() { 
     if ($("#text1").val().length < 4 || $("#text1").val().length > 200) { 
      $(this).parent().siblings("div.alert-error").show("slow").delay(4000).hide("slow"); 
      return false; 
     } else { 
      $(this).parent().siblings("div.alert-info").show("slow").delay(4000).hide("slow"); 
      return false; 
     } 
    }); 

    $("#2").click(function() { 
     if ($("#text2").val().length < 4 || $("#text2").val().length > 200) { 
      $(this).parent().siblings("div.alert-error").show("slow").delay(4000).hide("slow"); 
      return false; 
     } else { 
      $(this).parent().siblings("div.alert-info").show("slow").delay(4000).hide("slow"); 
      return false; 
     } 
    }); 
}); 
+0

Thx много! мы можем использовать $ ('

...
') .appendTo ('. myclass'). show («slow»). delay (4000) .hide («slow»); Это лучше, чем $ (this) .parent(). Siblings или нет? – mpgn

+0

Да, вы можете попробовать это! –

Смежные вопросы