2016-11-04 4 views
3

У меня есть div с полем формы и кнопкой, которую я хотел бы иметь петрушку, чтобы проверить все поля формы в этом div, которые имеют собственный атрибут data-validate. Мне нужно, чтобы он работал независимо от того, сколько полей формы находится в div. Поэтому он должен работать с базами данных, текстовыми полями и полями выбора.Как проверить все поля формы в div с помощью parsley.js?

HTML:

<div id="parsley-div"> 
    <div class="form-group"> 
    <label for="city">City</label> 
    <input id="city-test" type="text" class="form-control" data-parsley-required data-parsley-required-message="Please enter a city name."> 
    </div> 
    <button class="btn btn-primary">Save Changes</button> 
</div> 

JS:

$('#parsley-div').find('button').click(function(){ 
    $('#parsley-div').parsley().validate(); 
}); 

К сожалению, это не работает. Я заметил, что это работает, если есть тег формы вокруг полей формы, но мне нужно, чтобы это был div. Я создал JSFiddle, который показывает оба случая: https://jsfiddle.net/8rkxzjx1/2/

Как я могу использовать петлю для проверки всех полей формы с атрибутами data-parsley в указанном div? Если возможно, отредактируйте JSFiddle, чтобы показать правильную реализацию. Спасибо.

Edit:

Я понял, что это работает, но он не чувствует себя очень эффективным:

$('#parsley-div').find("input, textarea, select").each(function (index, value) { 
    $(this).parsley().validate(); 
}); 
+0

Ваше решение кажется единственным, которое работает для всех ожидаемых входов. Я все равно посмотрю на это. –

+0

zeck, я обновил ответ. это то, что я придумал. Я не уверен, есть ли лучший способ достичь этого. –

ответ

5

Вы можете использовать

$('#parsley-div :input:not(:button)').parsley().validate(); 

См fiddle.

Редактировать

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

$('#parsley-div :input:not(:button)').each(function (index, value) { 
    $(this).parsley().validate(); 
}); 

описание: fiddle.

Или содержание может быть завернуты в виде элемента, а затем быть подтверждено следующим образом:

$("#parsley-div").wrap("<form id='parsley-form'></form>"); 
$('#parsley-div').find('button').click(function() { 
    $('#parsley-form').parsley().validate(); 
}); 

Или поскольку ОП не хочет иметь элемент формы в Dom, содержание может быть завернуты в форме и после этого форма может быть удалена после проверки.

$('#parsley-div').find('button').click(function() { 
    $("#parsley-div").wrap("<form id='parsley-form'></form>"); 
    $('#parsley-form').parsley().validate(); 
    $("#parsley-div").unwrap(); 
}); 

Ссылки на fiddle-wrap и fiddle-wrap-unwrap.

+0

Спасибо за ответ, но мне нужно, чтобы он работал для текстовых областей и выбирал тоже. – zeckdude

+0

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

+0

@zeckdude '$ ('# parsley-form'). Parsley(). Validate();' похоже, что он делает точную вещь как '.each (function())'. поэтому ваше решение кажется наиболее подходящим. –