jQuery-Validation-Engine всплывающее окно неправильной позиции в скрытом поле (вкладки jquery)

Я использую jQuery-Validation-Engine для проверки формы, но у меня проблема.... У меня есть форма в div, разделенная на вкладки, и я устанавливаю validationEngine следующим образом:

$(".test").validationEngine({validateNonVisibleFields: true});

При отправке отлично работает как в полях активной вкладки, так и в неактивной .... но всплывающая ошибка полей в неактивной вкладке не соответствует соответствующему полю.

Кажется, что функция _calculatePosition игнорирует реальные координаты скрытого поля для проверки...

Любое предложение?

Благодаря многим


validation jquery hidden-field jquery-tabs jquery-validation-engine
person Francesco G.    schedule 25.07.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я решил ту же проблему, используя метод updatePromptsPosition validationEngine для каждой вкладки... Что-то вроде этого:

$(".tabs-1").click(function(){
    $form.find('form').validationEngine('updatePromptsPosition');
});
person mllacer    schedule 13.08.2013

arrow_upward
1
arrow_downward

Тот факт, что на этот вопрос еще не ответили должным образом, откровенно говоря, немного глуп, учитывая простоту решения. Простой (и цивилизованный) способ — вызывать проверку каждый раз, когда пользователь переключает вкладки, и для этого вы просто настраиваете свои вкладки следующим образом:

Если у вас есть следующая форма, которая охватывает несколько вкладок...

<form id="myForm" action="">
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a>

        </li>
        <li><a href="#tabs-2">Tab 2</a>

        </li>
        <li><a href="#tabs-3">Tab 3</a>

        </li>
    </ul>
    <div id="tabs-1">
        <input type="text" id="requiredFiled" name="requiredField" class="validate[required]" />
    </div>
    <div id="tabs-2"></div>
    <div id="tabs-3"></div>
</div>

Then you set up the form and tabs like this:

jQuery("#myForm").validationEngine('attach', {
    promptPosition: "bottomLeft",
    validationEventTrigger: "submit",
    validateNonVisibleFields: true,
    updatePromptsPosition: true
});

$(function () {
    $("#tabs").tabs({
        beforeActivate: function (event, ui) {
            if (!$("#myForm").validationEngine('validate')) {
                event.preventDefault();
                $('#myForm').validationEngine('hide');
                setTimeout(function () {
                    $("#myForm").validationEngine('validate');
                }, 450);
            }
        }
    });
});

В результате пользователь не может выбрать другую вкладку, если вкладка, на которой он в данный момент находится, не полностью действительна. Вот демонстрация JSFiddle: http://jsfiddle.net/g9yLL/36/

Ваше здоровье! :-)

person The Saint    schedule 11.02.2014