2013-07-29 4 views
-4

Содержимое под скрытым div должно проверяться только при активном div. Но в моем случае сообщение об ошибке не работает для случая «Слон». код в http://jsfiddle.net/2eRsm/ для получения более подробной информации, спасибо заранееПроверка JQuery со скрытым содержимым

<form> 
    Choose your animal 
<select id="selectMenu"> 
    <option></option> 
    <option value="monkey">Monkey</option> 
    <option value="elephant">Elephant</option>  
</select> 
<div class="mon">Monkey: 
    <input type="text" class="required" name="mon"/> 
    <p id="error-msg">&nbsp;</p> 
    </div> 

<div class="ele">Elephant: 
    <input type="text" class="required" name="ele"/> 
    <p id="error-msg">&nbsp;</p> 
    </div> 
<button>submit</button>  
</form> 
//js 
$(document).ready(function() {  
     $("#selectMenu").bind("change", function() { 
     if ($(this).val() == "monkey") { 
      $(".mon").slideDown(); 
      $(".ele").slideUp(); 
     } 
     else if($(this).val() =="elephant") { 
      $(".ele").slideDown(); 
      $(".mon").slideUp(); 
     } 
    }); 
}); 
$("button").click(function(){ 
    $("form").submit(); 
}); 
$("form").validate({ 
    ignore:":hidden", 
    rules: { 
     name: ["mon", "ele"] 
    }, 
    errorPlacement: function(error, element) { 
     error.appendTo($('#error-msg')) 
    }, 
    invalidHandler: function(form, validator) { 
     console.log("error"); 
    }, 
    submitHandler: function(form) { 
     console.log("no error"); 
    } 
}); 
//css 
input { 
    border: 1px solid #666; 
    margin: 10px; 
    padding: 3px; 
} 
p{ 
    display:inline; 
    color: red; 
} 
.mon,.ele{ 
     display: none; 
}* 
+1

Найди мне ошибку ? Вы что-то пробовали? Вы получаете какие-либо ошибки? – putvande

+0

да, я попытался изменить идентификатор p, я не получаю ошибку, он не отображает содержимое p под слоном div, хотя, возможно, для каждого div может понадобиться отдельный идентификатор – dochoex

+0

Как уже упоминалось в ответе ниже , у вас есть дубликаты идентификаторов. Поскольку ваша проверка помещает ошибку в элемент с '# error-msg', она помещает только в первый найденный элемент. Таким образом, второй остается пустым. Вы можете попробовать что-то с именем класса (оба элемента могут иметь одно и то же имя класса) – putvande

ответ

0

Вы использовали тот же идентификатор 2 раза для сообщ ошибок ... использовать разные ID Попробуйте для ............... http://jsfiddle.net/2eRsm/3/

<form> 
    Choose your animal 
<select id="selectMenu"> 
    <option></option> 
    <option value="monkey">Monkey</option> 
    <option value="elephant">Elephant</option>  
</select> 
<div class="mon">Monkey: 
    <input type="text" class="required" name="mon"/> 
    <p id="error-msg">&nbsp;</p> 
    </div> 

<div class="ele">Elephant: 
    <input type="text" class="required" name="ele"/> 
    <p id="error-msg1">&nbsp;</p> 
    </div> 
<button>submit</button>  
</form> 
+0

Да, моя проблема в том, что Elephant не для Monkey, так как он работает даже с тем же ID в случае Monkey! – dochoex

+0

Спасибо за понимание, это означает, что мне нужно несколько разных идентификаторов. Я не знаю, является ли решение масштабируемым! – dochoex

4

2 раз ID не хорошо:

<p id="error-msg">&nbsp;</p> 

сделать это:

<p class="error-msg">&nbsp;</p> 

, а затем:

error.appendTo($('.error-msg')) 

для сброса i т:

$("#selectMenu").bind("change", function() { 
    $('.error-msg').html(""); 
+0

Я пробовал, но сообщение об ошибке не должно появляться! Перед подачей заявки на случай «Слон», так как это подразумевает, что пользователь действительно предоставил ввод! Что в этом случае ложно! – dochoex

+0

обновленный ответ ... – reyaner

0

ваших проверочных работ, но так как у вас есть два элемента с идентификатором «ошибка-сообщ», Держу пари, что ваше сообщение об ошибке привязывается к первому матчу, который скрыт, когда выбран «Слон» ,

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