Вопрос по jquery, jquery-validate, validation, twitter-bootstrap – jQuery Validate: добавить ошибку или проверить класс в родительский div

6

Я использую Twitter Bootstrap в качестве основы для проекта, над которым я работаю. Я пытаюсь проверить простую контактную форму с помощью плагина jQuery Validate, но это вызывает некоторые головные боли.

Я хочу добавитьError или жеValid класс кparent div каждой формы ввода. Вот мой код формы:

<code> <form id="msg-form" class="">
    <fieldset>
        <div class="input-prepend control-group pull-left">
            <span class="add-on">@</span>
            <input class="span3 required email" id="inputEmail" name="msg-email" type="text" placeholder="[email protected]">
        </div>
        <div class="input-prepend control-group pull-left">
            <span class="add-on"><i class="icon-user"></i></span>
            <input class="span3 required" id="inputName" name="msg-name" type="text" placeholder="Joe Bloggs">
        </div>
        <div class="input-prepend control-group">
            <span class="add-on" style="height: 53px;"><i class="icon-pencil"></i></span>
            <textarea class="span3 required" id="textarea" name="msg-comments" rows="2" style="height: 53px" placeholder="Just say hi, or tell us how we can help"></textarea>
        </div>
        <button type="submit" class="btn pull-right">Submit<i class="icon-chevron-right"></i></button>
    </fieldset>
</form> 
</code>

Как вы можете видеть моиdiv.control-group это div, к которому я хочу добавить класс. Я пытался использоватьhighlight (как предложеноВот, но это просто не сработало) & amp;errorPlacement (см. ниже), но я делаю это неправильно.

В идеале я хочу, чтобы класс был добавлен / удаленon keyup так что он сохраняет отличную функциональность, которую предлагает плагин. Этот простой код работает, но он не удаляет класс & amp; работает только при подаче формы:

<code>$("#msg-form").validate({
    errorPlacement: function(error, element) {
        $(element).parent('div').addClass('error');
    }
});
</code>

Кто-нибудь может предложить, какой вариант я должен использовать, чтобы достичь этого ?!

Заранее спасибо - могу предоставить любые дополнительные детали в случае необходимости!

похоже, так и должно быть$(error).parent('div').addClass('error'); дайте мне знать, если это получилось gdoron
@gdoron спасибо за предложение, к сожалению, это не сработало. Код, который я разместил выше, вызывает применение класса, но имеет две ошибки: 1.) Он не удаляет класс, когда поле в этом случае является действительным 2.) Он работает только для ошибок (& amp; в идеале я хотел бы добавить альтернативный класс для допустимых входных данных) Sheixt
возможный дубликатI want jQuery validator to add a class to the form element's parent KyleMit

Ваш Ответ

3   ответа
13

highlight а такжеunhighlight функции:

$("#msg-form").validate({
    highlight: function(element) {
        $(element).parent('div').addClass('error');
    },
    unhighlight: function(element) {
        $(element).parent('div').removeClass('error');
    }
});
Нет, я использую Firefox в качестве основного браузера, в котором я собираю проект. После этого я проведу кросс-браузерное тестирование .... Я попытался удалить ссылки на заполнители, но это по-прежнему не отправляется (с подходом выделения) ). Sheixt
Я думаю твой<button type="submit"> может понадобиться<input type="submit"> для проверки уволить? Не уверен, что событие отправки формы вызвано<button>?
Не думал об этом! Увы, до сих пор нет радости! Тип элемента не имеет значения. Если подумать, если бы это было причиной проблемы, не сработала бы даже базовая проверка ?! Annnnnyyyywwaaaayy ... это странно. Я не могу думать ни о какой (очевидной) причине, по которой это не сработает. Sheixt
Из интереса, вы используете IE? У меня была проверка достоверности в качестве заполнителя в качестве значения в прошлом, и поэтому я не запускаю "требуемый" валидатор.
Спасибо за предложение. По ходу дела я уже попробовал этот подход. Я вставил код в соответствии с предложением & amp; ничего не работает ... Проверка формы даже не срабатывает !! Я дважды проверил Firebug и никаких ошибок не было. Я использую v1.9.0 плагина & amp; v1.7.1 jQuery, если это какой-либо помощи. Sheixt
0

я ошибаюсь, но похоже, что вам нужно .parents ('div.control-group'), а не .parent (), который добавляет .error к неправильному div, не меняя цвета формы BootStraps на красный.

Это потому, что входные данные, которые JQuery Validate пытается выделить, находятся на две ниже .control-group, которая требуется BootStrap, чтобы .error вступил в силу.

$("#form").validate({
    highlight: function(element, errorClass, validClass){
    $(element).parents("div.control-group").addClass(errorClass).removeClass(validClass);
},

Надеюсь это поможет

1

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

Access Validator Settings

Первым делом стоит изменитьsettings объект в вашей форме валидатора. Вы можете сделать это любым из следующих способов:

Before the form is loaded for all forms by calling jQuery.validator.setDefaults() When initializing the form by passing in options on .validate([options]) After initialization by locating the validator object on the form with $("form").data("validator").settings

Поскольку вы используете MVC, вариант № 2 исключен, посколькуненавязчивая-валидация автоматически инициализирует форму. Так что давайте продолжим использовать опцию 3 - цель здесь состоит в том, чтобы просто иметь возможность настраивать параметры в форме.

Override Default Behavior

Методы по умолчанию, которые мы хотим изменить:highlight а такжеunhighlight который будетhighlight недопустимые поля или отменить изменения, сделанные с помощью опции выделения, соответственно. Вот их поведение по умолчаниюв соответствии с исходным кодом:

highlight: function( element, errorClass, validClass ) {
    if ( element.type === "radio" ) {
        this.findByName( element.name ).addClass( errorClass ).removeClass( validClass );
    } else {
        $( element ).addClass( errorClass ).removeClass( validClass );
    }
},
unhighlight: function( element, errorClass, validClass ) {
    if ( element.type === "radio" ) {
        this.findByName( element.name ).removeClass( errorClass ).addClass( validClass );
    } else {
        $( element ).removeClass( errorClass ).addClass( validClass );
    }
}

Таким образом, у вас есть несколько вариантов здесь.

Completely replace those functions and write them on your own Wrap those functions and call them like normal but add your own custom code before or after. Option 1 - Replace Wholesale

Этот маршрут довольно прост. Просто напишите там, что вы хотите. Может быть, семя из исходного кода, может быть, делать свое дело.

var valSettings = $("form").data("validator").settings
valSettings.highlight = function(element, errorClass, validClass) { ... }
valSettings.unhighlight = function(element, errorClass, validClass) { ... }
Option 2 - Wrap Functions

Это менее навязчиво, поэтому, вероятно, предпочтительнее в большинстве случаев.

Поскольку в конечном итоге вы будете заменять значениеvalSettings.highlightвам понадобится доступ к чистой исходной версии исходной функции. Вы можете сохранить свой собственный или получить один из глобальных значений по умолчанию

// original highlight function
var highlightOriginal = $("form").data("validator").settings.highlight;
var highlightDefaults = $.validator.defaults.highlight

С точки зрения упаковки функций JavaScript, есть пара примеровВот, Вот, а такжеВот). Вот проанализированный пример одного из тех, которые помогут связатьthis контекст между вызовами функций, сохраните арность передаваемых аргументов и сохраните возвращаемое значение:

function wrap(functionToWrap, beforeFunction) {
    return function () {
        var args = Array.prototype.slice.call(arguments),
        beforeFunction.apply(this, args);
        return functionToWrap.apply(this, args);
    };
};

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

function highlightDecorator(element, errorClass, validClass) {
    $(element).closest("div").addClass(errorClass).removeClass(validClass);
}

Wrapping It All Up (see what I did there)

$(function () {
  var valSettings = $("form").data("validator").settings
  valSettings.highlight = wrap($.validator.defaults.highlight, highlightDecorator)
  valSettings.unhighlight = wrap($.validator.defaults.unhighlight, unhighlightDecorator)
});

function wrap(functionToWrap, beforeFunction) {
  return function () {
    var args = Array.prototype.slice.call(arguments);
    beforeFunction.apply(this, args);
    return functionToWrap.apply(this, args);
  };
};

function highlightDecorator(element, errorClass, validClass) {
  $(element).closest("div").addClass(errorClass).removeClass(validClass);
}
function unhighlightDecorator(element, errorClass, validClass) {
  $(element).closest("div").addClass(validClass).removeClass(errorClass);
}

Поэтому, когда мы объединяем все вышеперечисленные функции, это должно выглядеть примерно так:

Working Demo in Stack Snippets and jsFiddle

$(function () {
  var valSettings = $("form").data("validator").settings
	valSettings.highlight = wrap($.validator.defaults.highlight, highlightDecorator)
  valSettings.unhighlight = wrap($.validator.defaults.unhighlight, unhighlightDecorator)
});

function wrap(functionToWrap, beforeFunction) {
  return function () {
    var args = Array.prototype.slice.call(arguments);
    beforeFunction.apply(this, args);
    return functionToWrap.apply(this, args);
  };
};

function highlightDecorator(element, errorClass, validClass) {
  $(element).closest("div").addClass(errorClass).removeClass(validClass);
}
function unhighlightDecorator(element, errorClass, validClass) {
  $(element).closest("div").addClass(validClass).removeClass(errorClass);
}
input.input-validation-error  {
  border: solid 1px red;
}
.input-validation-error label {
  color: red;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"></script>
    
<form action="/Person" method="post">
  
  <div class="required">
    <label for="Name">Name <em>*</em></label>           
    <input id="Name" name="Name" type="text" value="" 
           data-val="true" data-val-required="The Name field is required."/>
    <span class="field-validation-valid" 
          data-valmsg-for="Name" data-valmsg-replace="true"></span>
  </div>
  
  <input type="submit" value="Save" />
  
</form>

Похожие вопросы