javascript - Getting Parsley 2.x working with Bootstrap 3 correctly -
i using twitter bootstrap 3.1.1
parsley v2.0.0-rc3
. made work apart classhandler
option.
i have html this:
<div class="form-group"> <label class="control-label" for="username">user name</label> <input class="form-control" id="username" name="username" required="" type="text" value=""> </div>
and run parsley this:
$("#register_form").parsley({ successclass: "has-success", errorclass: "has-error", classhandler: function(el) { return $(el).closest(".form-group"); }, errorswrapper: "<span class='help-block'></span>", errortemplate: "<span></span>" });
everything works fine, success / error classes applied wrong element. after page loaded, this:
<div class="form-group"> <label class="control-label" for="username">user name</label> <input class="form-control" id="username" name="username" required="" type="text" value="" data-parsley-id="5043"> <span class="help-block" id="parsley-id-5043"></span> </div>
and when validated, result this:
<div class="form-group"> <label class="control-label" for="username">user name</label> <input class="form-control has-error" id="username" name="username" required="" type="text" value="" data-parsley-id="5043"> <span class="help-block filled" id="parsley-id-5043"> <span class="parsley-required">this value required.</span> </span> </div>
however, expect different:
<div class="form-group has-error"> <label class="control-label" for="username">user name</label> <input class="form-control" id="username" name="username" required="" type="text" value="" data-parsley-id="5043"> <span class="help-block filled" id="parsley-id-5043"> <span class="parsley-required">this value required.</span> </span> </div>
i have verified using alert
function runs. new jquery , javascript, not know how debug further , fix it.
you should try:
classhandler: function(el) { return el.$element.closest(".form-group"); }
the el object parsley (i have seen using chrome dev console) , has $element field jquery element :)
Comments
Post a Comment