validation - Parsley.js - Display errors near fields AND in a combined list above form -
is possible configure parsley.js display error messages both... a) next individual fields, , b) in combined list elsewhere on page ...at same time?
also, possible render error messages hyperlink field generated error?
thanks.
update:
the accepted answer fantastic example (thanks milz!) needed bit more refining.
for benefit of other readers, here's updated code in which...
error messages no longer duplicate after failing first validation (in original example, try generating error repeatedly pressing backspace in field - new message added list every keystroke)
error message take text of label in same form-group (handy radios , checkboxes don't have individual labels meaningful)
error messages removed list on fly when they're fixed user.
entire error panel has title, , hidden/shown depending on whether has content or not.
boostrap styling, layout & parsley config provided.
// 1. configure parsley bootstrap 3 forms // window.parsleyconfig = { successclass: "has-success", errorclass: "has-error", classhandler: function(el) { return el.$element.closest(".form-group"); }, errorscontainer: function(el) { return el.$element.closest(".control"); }, errorswrapper: "<span class='help-block parsley-messages'></span>", errortemplate: "<span></span>" }; // 2. parslify form... $("#theform").parsley(); // 3. configure parsley display combined validation-errors-list // $(function() { // convenience members $.validationerrors = { container: $('div.validation-errors-container'), list: $('div.validation-errors-container ul.validation-errors-list'), updatecontainer: function() { // hide/show container if list empty/full $.validationerrors.container.toggleclass("filled", $.validationerrors.list.find("li:first").length > 0); }, removeitem: function(sfieldname) { // remove related error messages list $.validationerrors.list.find('li[data-related-field-name="' + sfieldname + '"]').remove(); } }; // nb: event names pertain parsley v2.0 // before each validation, clear validation-errors of div $.listen('parsley:form:validate', function() { $.validationerrors.list.html(); }); // when field has error $.listen('parsley:field:error', function(fieldinstance) { var fieldname = fieldinstance.$element.attr('name'); $.validationerrors.removeitem(fieldname); // error messages var messages = parsleyui.geterrorsmessages(fieldinstance); // loop through messages (var in messages) { // create message each error var fieldlabel = fieldinstance.$element.closest(".form-group").find("label:first"); var fieldlabeltext = fieldlabel.clone().children().remove().end().text().trim(); var fieldname = fieldinstance.$element.attr("name"); var $m = $('<li data-related-field-name="' + fieldname + '"><a data-related-field-name="' + fieldname + '" href="#na"><strong>' + fieldlabeltext + '</strong> - ' + messages[i] + '</a></li>'); $.validationerrors.list.append($m); } $.validationerrors.updatecontainer(); }); $.listen('parsley:field:success', function(fieldinstance) { $.validationerrors.removeitem(fieldinstance.$element.attr('name')); $.validationerrors.updatecontainer(); }); // when there's click on error message div $(document).on('click', 'a[data-related-field-name]', function() { // take field's name attribute var name = $(this).attr('data-related-field-name'); $("[name=" + name + "]:first").focus(); }); });body { padding: 10px; } /* parsley form validation */ /* ensure field-spans injected parsley don't take space when empty... */ .parsley-messages { display: none; } .parsley-messages.filled { display: block; } /* aggregated parsley error message display... */ div.validation-errors-container { display: none; } div.validation-errors-container.filled { display: block; } div.validation-errors-container ul.validation-errors-list { margin: 0; padding: 0; } div.validation-errors-container ul.validation-errors-list li { color: rgb(169, 68, 66); list-style: outside none disc; margin-left: 16px; padding-left: 1em; text-indent: -0.7em; } div.validation-errors-container ul.validation-errors-list li { color: inherit; }<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.0.7/parsley.min.js"></script> <!-- validation errors container --> <div class="validation-errors-container panel panel-danger" role="alert" aria-labelledby="validation-errors-heading" aria-live="assertive"> <div class="panel-heading" id="validation-errors-heading"><strong>alert!</strong> please correct following errors...</div> <div class="panel-body"> <ul class="validation-errors-list"></ul> </div> </div> <!-- bootstrap 3 form --> <form class="form-horizontal" id="theform"> <div class="form-group"> <label class="control-label col-xs-2"> name <span class="required-indicator" title="required">*</span> </label> <div class="control col-xs-10"> <input type="text" name="username" class="form-control" data-parsley-required="true"> </div> </div> <div class="form-group"> <label class="control-label col-xs-2"> gender <span class="required-indicator" title="required">*</span> </label> <div class="control col-xs-10"> <label class="checkbox-inline"> <input type="radio" data-parsley-required="true" name="gender" value="f" />girl </label> <label class="checkbox-inline"> <input type="radio" name="gender" value="m" />boy </label> </div> </div> <div class="form-group"> <label class="control-label col-xs-2"> email <span class="required-indicator" title="required">*</span> </label> <div class="control col-xs-10"> <input type="text" name="useremail" class="form-control" data-parsley-type="email" data-parsley-required="true"> </div> </div> <button type="submit" class="btn btn-primary">submit</button> </form>
to accomplish want, need use parsley's events. take @ event's description , comments on below code.
<div class="validation-errors"></div> <form> <input type="text" name="field1" required /> <input type="text" name="field2" required /> <input type="submit" /> </form> <script> $(document).ready(function() { // validate form $("form").parsley(); // before each validation, clear validation-errors of div $.listen('parsley:form:validate', function() { $('.validation-errors').html(''); }); // when field has error $.listen('parsley:field:error', function(fieldinstance){ // error messages var messages = parsleyui.geterrorsmessages(fieldinstance); // field's name var fieldname = fieldinstance.$element.attr('name'); // loop through messages (var in messages) { // create message each error var $m = $('<p><a class="focus-' + fieldname + '" href="#">' + fieldname + ': ' + messages[i] + '</a><p>'); // append errors div $('.validation-errors').append($m); } }); }); // when there's click on error message div $(document).on('click', 'a[class^="focus-"]', function(){ // take field's name class var parts = $(this).attr('class').split('-'); $("[name=" + parts[1] + "]").focus(); }); </script> here's demo in jsfiddle.
important note: code i'm providing uses events available in parsley 2.0.* . if you're using newly parsley 2.1.*, should use correct events. instead of parsley:form:validate use form:validate , replace parsley:field:error field:error.
Comments
Post a Comment