Загрузить пользовательское сообщение об ошибке при сбое проверки jquery

Question

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

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

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

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

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

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

Answer 1

Это не очень похоже на jQuery ...

Но это:

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

Answer 2

Вы можете сделать это несколькими разными способами, сначала вы можете использовать опцию errorContainer в 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 довольно гибкая. Обязательно прочитайте документацию здесь .

Answer 3

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