Загружать пользовательские сообщения об ошибке при неудачной проверке jQuery

Question

Здравствуйте, я работаю с приложением, которое уже имеет несколько критериев проверки и загружает скрытые div, специфичные для ошибки. Теперь у меня есть несколько динамических строк для заполнения, так как я не знаю, какой тип ввода они будут, я автоматизирую процесс проверки с помощью плагина проверки jquery.

Теперь я не могу понять, как я смогу отобразить блок, когда определенный необходимый элемент не был заполнен. В настоящее время я бы проверил состояние, такое как

  if(country.length == 0 && state == 'xx') 
      { 
       go = false; 
       document.getElementById('reqStateMsg').style.display = 'block'; 
      } 

Как бы это сделать в методе проверки jQuery ?? В настоящее время я просто загружаю все элементы требуемым классом. Но для отображения метода ошибки я должен также добавить «*», который загрузил общий метод, который будет работать с моими динамическими элементами ввода, но я хочу загрузить свои собственные блоки div div для статических элементов ввода.

Теперь я только вызываю метод validate, я не уверен, как бы добавить нагрузку на специальные div div здесь.

$('#FormInfo').validate(); 

Answer 1

Вы можете сделать это несколько различных способов, сначала вы можете использовать опцию errorContainer of jQuery validate():

$("#form1").validate({ 
    errorLabelContainer: "#error-container-form1 ul", 
    wrapper: "li" 
}); 

Наряду с HTML, как это:

<form action="#" id="form1"> 
    <label for="Country">Country:</label> 
    <input name="Country" title="Country is required" id="Country" class="required"/> 
    <label for="State">State:</label> 
    <input name="State" title="Please enter a state" id="State" class="required"/> 
    <input type="submit" value="Submit" /> 
</form> 

Это позволит устранить вашу потребность в специальном <div> только для сообщений об ошибках.

---

Однако, если вам нужен <div> для сообщений об ошибках, которые могли бы сделать что-то вроде этого:

$("#form2").validate({ 
    invalidHandler: function(form, validator) { 
     if (!$("form#form2").validate().element("#State2")) { 
      $("div#error-container-form2").append($("div#state-error")); 
      $("div#state-error").show(); 
     } 
    } 
}); 

и следующий HTML:

<form action="#" id="form2"> 
    <label for="Country2">Country:</label> 
    <input name="Country2" title="Country is required" id="Country2" class="required"/> 
    <label for="State2">State:</label> 
    <input name="State2" id="State2" class="required"/> 
    <input type="submit" value="Submit" /> 
</form> 
<div id="error-container-form2"></div> 

<div id="state-error" style="display:none">Please enter a State!</div> 

Пример: http://jsfiddle.net/JWTTZ/

Проверка jQuery довольно гибкая. Убедитесь, что вы прочитали документацию here.

Answer 2

if($(".erroclass").size() > 0) { 
    $("#reqStateMsg").css("display", "block"); 
} 

Answer 3

Это не очень JQuery как ...

Но это:

$("#your-form-name").submit(function(){ 
if(country.length != 0 && state != 'xx') { 
    return true; 
} 
$("#reqStateMsg").fadeIn().fadeOut(5000); // slowly fadeout ;) 
return false; 
});