mirror of
https://github.com/silverstripe/silverstripe-userforms.git
synced 2024-10-22 17:05:42 +02:00
Update step rendering
This commit is contained in:
David Craig
parent
3217695713
commit
65651387e0
@ -44,6 +44,13 @@ class UserForm extends Form {
|
||||
return $this->controller->LastEdited;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return boolean
|
||||
*/
|
||||
public function getDisplayErrorMessagesAtTop() {
|
||||
return $this->controller->DisplayErrorMessagesAtTop;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return array
|
||||
*/
|
||||
@ -66,11 +73,18 @@ class UserForm extends Form {
|
||||
public function getFormSteps() {
|
||||
$steps = new ArrayList();
|
||||
|
||||
foreach ($this->controller->Fields()->filter('ClassName', 'EditableFormStep') as $step) {
|
||||
$steps->push(array(
|
||||
'Title' => $step->Title,
|
||||
'Fields' => $this->getFormFields($step)
|
||||
));
|
||||
foreach ($this->controller->Fields() as $field) {
|
||||
if ($field instanceof EditableFormStep) {
|
||||
$steps->push($field->getFormField());
|
||||
continue;
|
||||
}
|
||||
|
||||
if(empty($steps->last())) {
|
||||
trigger_error('Missing first step in form', E_USER_WARNING);
|
||||
$steps->push(CompositeField::create());
|
||||
}
|
||||
|
||||
$steps->last()->push($field->getFormField());
|
||||
}
|
||||
|
||||
return $steps;
|
||||
@ -81,18 +95,12 @@ class UserForm extends Form {
|
||||
* by using {@link updateFormFields()} on an {@link Extension} subclass which
|
||||
* is applied to this controller.
|
||||
*
|
||||
* @param EditableFormStep $parent
|
||||
*
|
||||
* @return FieldList
|
||||
*/
|
||||
public function getFormFields($parent = null) {
|
||||
if(!$parent) {
|
||||
$parent = $this->controller;
|
||||
}
|
||||
|
||||
public function getFormFields() {
|
||||
$fields = new FieldList();
|
||||
|
||||
foreach($parent->Fields() as $editableField) {
|
||||
foreach($this->controller->Fields() as $editableField) {
|
||||
// get the raw form field from the editable version
|
||||
$field = $editableField->getFormField();
|
||||
|
||||
|
||||
@ -367,26 +367,10 @@ class UserDefinedForm_Controller extends Page_Controller {
|
||||
$form = UserForm::create($this);
|
||||
|
||||
$this->generateConditionalJavascript();
|
||||
$this->generateValidationJavascript($form);
|
||||
|
||||
return $form;
|
||||
}
|
||||
|
||||
/**
|
||||
* Build jQuery validation script and require as a custom script
|
||||
*
|
||||
* @param UserForm $form
|
||||
*/
|
||||
public function generateValidationJavascript(UserForm $form) {
|
||||
// set the custom script for this form
|
||||
Requirements::customScript(
|
||||
$this
|
||||
->customise(array('Form' => $form))
|
||||
->renderWith('ValidationScript'),
|
||||
'UserFormsValidation'
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate the javascript for the conditional field show / hiding logic.
|
||||
*
|
||||
|
||||
@ -18,14 +18,6 @@ class EditableFormStep extends EditableFormField {
|
||||
*/
|
||||
private static $plural_name = 'Steps';
|
||||
|
||||
/**
|
||||
* @config
|
||||
* @var array
|
||||
*/
|
||||
private static $has_many = array(
|
||||
'Fields' => 'EditableFormField'
|
||||
);
|
||||
|
||||
/**
|
||||
* @return FieldList
|
||||
*/
|
||||
@ -45,7 +37,7 @@ class EditableFormStep extends EditableFormField {
|
||||
* @return FormField
|
||||
*/
|
||||
public function getFormField() {
|
||||
return false;
|
||||
return CompositeField::create()->setTitle($this->Title);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -8,7 +8,7 @@ jQuery(function ($) {
|
||||
FORM_ID: 'UserForm_Form', // $Form.FormName.JS
|
||||
ERROR_CONTAINER_ID: '', // $ErrorContainerID.JS
|
||||
ENABLE_LIVE_VALIDATION: false, // $EnableLiveValidation
|
||||
DISPLAY_ERROR_MESSAGES_AT_TOP: true, // $DisplayErrorMessagesAtTop
|
||||
DISPLAY_ERROR_MESSAGES_AT_TOP: false, // $DisplayErrorMessagesAtTop
|
||||
HIDE_FIELD_LABELS: false, // $HideFieldLabels
|
||||
MESSAGES: {} // var meaasges
|
||||
};
|
||||
@ -63,9 +63,50 @@ jQuery(function ($) {
|
||||
self.jumpToStep(stepNumber - 1);
|
||||
});
|
||||
|
||||
this.$el.validate(this.validationOptions);
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
/*
|
||||
* Default options for step validation. These get extended in main().
|
||||
*/
|
||||
UserForm.prototype.validationOptions = {
|
||||
ignore: ':hidden',
|
||||
errorClass: 'required',
|
||||
errorElement: 'span',
|
||||
errorPlacement: function (error, element) {
|
||||
error.addClass('message');
|
||||
|
||||
if(element.is(':radio') || element.parents('.checkboxset').length > 0) {
|
||||
error.insertAfter(element.closest('ul'));
|
||||
} else {
|
||||
error.insertAfter(element);
|
||||
}
|
||||
},
|
||||
success: function (error) {
|
||||
var errorId = $(error).attr('id');
|
||||
|
||||
error.remove();
|
||||
|
||||
if (CONSTANTS.DISPLAY_ERROR_MESSAGES_AT_TOP) {
|
||||
// Pass the field's ID with the event.
|
||||
$('.userform').trigger('userform.form.valid', [errorId.substr(0, errorId.indexOf('-error'))]);
|
||||
}
|
||||
},
|
||||
messages: CONSTANTS.MESSAGES,
|
||||
rules: {
|
||||
// TODO
|
||||
// <% loop $Fields %>
|
||||
// <% if $Validation %><% if ClassName == EditableCheckboxGroupField %>
|
||||
// '{$Name.JS}[]': {$ValidationJSON.RAW},
|
||||
// <% else %>
|
||||
// '{$Name.JS}': {$ValidationJSON.RAW},
|
||||
// <% end_if %><% end_if %>
|
||||
// <% end_loop %>
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @func UserForm.addStep
|
||||
* @param {object} step - An instance of FormStep.
|
||||
@ -157,18 +198,40 @@ jQuery(function ($) {
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @func hasErrors
|
||||
* @return boolean
|
||||
* @desc Checks if the error container has any error messages.
|
||||
*/
|
||||
ErrorContainer.prototype.hasErrors = function () {
|
||||
return this.$el.find('.error-list').children().length > 0;
|
||||
};
|
||||
|
||||
/**
|
||||
* @func removeErrorMessage
|
||||
* @desc Removes an error message from the error container.
|
||||
*/
|
||||
ErrorContainer.prototype.removeErrorMessage = function (fieldId) {
|
||||
this.$el.find('#' + fieldId + '-top-error').remove();
|
||||
|
||||
// If there are no more error then hide the container.
|
||||
if (!this.hasErrors()) {
|
||||
this.hide();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @func ErrorContainer.updateErrorMessage
|
||||
* @param {object} input - The jQuery input object which contains the field to validate.
|
||||
* @param {object} $input - The jQuery input object which contains the field to validate.
|
||||
* @param {object} message - The error message to display (html escaped).
|
||||
* @desc Update an error message (displayed at the top of the form).
|
||||
*/
|
||||
ErrorContainer.prototype.updateErrorMessage = function (input, message) {
|
||||
var inputID = input.attr('id'),
|
||||
ErrorContainer.prototype.updateErrorMessage = function ($input, message) {
|
||||
var inputID = $input.attr('id'),
|
||||
anchor = '#' + inputID,
|
||||
elementID = inputID + '-top-error',
|
||||
messageElement = $('#' + elementID),
|
||||
describedBy = input.attr('aria-describedby');
|
||||
describedBy = $input.attr('aria-describedby');
|
||||
|
||||
// The 'message' param will be an empty string if the field is valid.
|
||||
if (!message) {
|
||||
@ -186,10 +249,10 @@ jQuery(function ($) {
|
||||
messageElement.show().find('a').html(message);
|
||||
} else {
|
||||
// Generate better link to field
|
||||
input.closest('.field[id]').each(function(){
|
||||
$input.closest('.field[id]').each(function(){
|
||||
anchor = '#' + $(this).attr('id');
|
||||
});
|
||||
|
||||
|
||||
// Add a new error message
|
||||
messageElement = $('<li><a></a></li>');
|
||||
messageElement
|
||||
@ -199,17 +262,17 @@ jQuery(function ($) {
|
||||
.html(message);
|
||||
|
||||
this.$el.find('ul').append(messageElement);
|
||||
|
||||
|
||||
// link back to original input via aria
|
||||
// Respect existing non-error aria-describedby
|
||||
if ( !describedBy ) {
|
||||
if (!describedBy) {
|
||||
describedBy = elementID;
|
||||
} else if ( !describedBy.match( new RegExp( "\\b" + elementID + "\\b" ) ) ) {
|
||||
} else if (!describedBy.match(new RegExp('\\b' + elementID + '\\b'))) {
|
||||
// Add to end of list if not already present
|
||||
describedBy += " " + elementID;
|
||||
}
|
||||
|
||||
input.attr('aria-describedby', describedBy);
|
||||
$input.attr('aria-describedby', describedBy);
|
||||
}
|
||||
};
|
||||
|
||||
@ -225,10 +288,6 @@ jQuery(function ($) {
|
||||
|
||||
this.$el = element instanceof jQuery ? element : $(element);
|
||||
|
||||
if (CONSTANTS.DISPLAY_ERROR_MESSAGES_AT_TOP) {
|
||||
this.errorContainer = new ErrorContainer(this.$el.find('.error-container'));
|
||||
}
|
||||
|
||||
// Has the step been viewed by the user?
|
||||
this.viewed = false;
|
||||
|
||||
@ -244,51 +303,31 @@ jQuery(function ($) {
|
||||
self.$el.trigger('userform.step.next');
|
||||
});
|
||||
|
||||
// Set up validation for the step.
|
||||
this.$el.validate(this.validationOptions);
|
||||
if (CONSTANTS.DISPLAY_ERROR_MESSAGES_AT_TOP) {
|
||||
this.errorContainer = new ErrorContainer(this.$el.find('.error-container'));
|
||||
|
||||
// Listen for errors on the UserForm.
|
||||
this.$el.closest('.userform').on('userform.form.error', function (e, validator) {
|
||||
// The step only cares about errors if it's currently visible.
|
||||
if (!self.$el.is(':visible')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Add or update each error in the list.
|
||||
$.each(validator.errorList, function (i, error) {
|
||||
self.errorContainer.updateErrorMessage($(error.element), error.message);
|
||||
});
|
||||
});
|
||||
|
||||
// Listen for fields becoming valid
|
||||
this.$el.closest('.userform').on('userform.form.valid', function (e, fieldId) {
|
||||
self.errorContainer.removeErrorMessage(fieldId);
|
||||
});
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
/*
|
||||
* Default options for step validation. These get extended in main().
|
||||
*/
|
||||
FormStep.prototype.validationOptions = {
|
||||
ignore: ':hidden',
|
||||
errorClass: 'required',
|
||||
errorElement: 'span',
|
||||
errorPlacement: function (error, element) {
|
||||
debugger;
|
||||
error.addClass('message');
|
||||
|
||||
if(element.is(':radio') || element.parents('.checkboxset').length > 0) {
|
||||
error.insertAfter(element.closest('ul'));
|
||||
} else {
|
||||
error.insertAfter(element);
|
||||
}
|
||||
|
||||
if (CONSTANTS.DISPLAY_ERROR_MESSAGES_AT_TOP) {
|
||||
// TODO
|
||||
this.errorContainer.updateErrorMessage(element, error.html());
|
||||
}
|
||||
|
||||
},
|
||||
success: function (error) {
|
||||
error.remove();
|
||||
},
|
||||
messages: CONSTANTS.MESSAGES,
|
||||
rules: {
|
||||
// TODO
|
||||
// <% loop $Fields %>
|
||||
// <% if $Validation %><% if ClassName == EditableCheckboxGroupField %>
|
||||
// '{$Name.JS}[]': {$ValidationJSON.RAW},
|
||||
// <% else %>
|
||||
// '{$Name.JS}': {$ValidationJSON.RAW},
|
||||
// <% end_if %><% end_if %>
|
||||
// <% end_loop %>
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @func ProgressBar
|
||||
* @constructor
|
||||
@ -360,8 +399,8 @@ jQuery(function ($) {
|
||||
* @desc Bootstraps the front-end.
|
||||
*/
|
||||
function main() {
|
||||
var userform = new UserForm($('.userform')),
|
||||
progressBar = new ProgressBar($('#userform-progress'));
|
||||
var userform = null,
|
||||
progressBar = null;
|
||||
|
||||
// Extend classes with common functionality.
|
||||
$.extend(FormStep.prototype, commonMixin);
|
||||
@ -370,7 +409,7 @@ jQuery(function ($) {
|
||||
// Extend the default validation options with conditional options
|
||||
// that are set by the user in the CMS.
|
||||
if (CONSTANTS.ENABLE_LIVE_VALIDATION) {
|
||||
$.extend(FormStep.prototype.validationOptions, {
|
||||
$.extend(UserForm.prototype.validationOptions, {
|
||||
onfocusout: function (element) {
|
||||
this.element(element);
|
||||
}
|
||||
@ -378,24 +417,18 @@ jQuery(function ($) {
|
||||
}
|
||||
|
||||
if (CONSTANTS.DISPLAY_ERROR_MESSAGES_AT_TOP) {
|
||||
$.extend(FormStep.prototype.validationOptions, {
|
||||
$.extend(UserForm.prototype.validationOptions, {
|
||||
// Callback for custom code when an invalid form / step is submitted.
|
||||
invalidHandler: function (event, validator) {
|
||||
var errorList = $('#' + CONSTANTS.ERROR_CONTAINER_ID + ' ul');
|
||||
|
||||
// Update the error list with errors from the validator.
|
||||
// We do this because top messages are not part of the regular
|
||||
// error message life cycle, which jquery.validate handles for us.
|
||||
errorList.empty();
|
||||
|
||||
$.each(validator.errorList, function () {
|
||||
// TODO
|
||||
this.errorContainer.updateErrorMessage($(this.element), this.message);
|
||||
});
|
||||
$('.userform').trigger('userform.form.error', [validator]);
|
||||
},
|
||||
onfocusout: false
|
||||
});
|
||||
}
|
||||
|
||||
userform = new UserForm($('.userform'));
|
||||
progressBar = new ProgressBar($('#userform-progress'));
|
||||
|
||||
// Conditionally hide field labels and use HTML5 placeholder instead.
|
||||
if (CONSTANTS.HIDE_FIELD_LABELS) {
|
||||
$('#' + CONSTANTS.FORM_ID + ' label.left').each(function () {
|
||||
|
||||
@ -13,18 +13,18 @@
|
||||
|
||||
<% loop $FormSteps %>
|
||||
<fieldset class="form-step">
|
||||
<% if $DisplayErrorMessagesAtTop %>
|
||||
<fieldset class="error-container" aria-hidden="true" style="display: none;">
|
||||
<div>
|
||||
<h4></h4>
|
||||
<ul></ul>
|
||||
</div>
|
||||
</fieldset>
|
||||
<% if $Top.DisplayErrorMessagesAtTop %>
|
||||
<fieldset class="error-container" aria-hidden="true" style="display: none;">
|
||||
<div>
|
||||
<h4></h4>
|
||||
<ul class="error-list"></ul>
|
||||
</div>
|
||||
</fieldset>
|
||||
<% end_if %>
|
||||
|
||||
<h2>$Title</h2>
|
||||
|
||||
<% loop $Fields %>
|
||||
<% loop $Children %>
|
||||
$FieldHolder
|
||||
<% end_loop %>
|
||||
|
||||
|
||||
@ -1,157 +0,0 @@
|
||||
(function($) {
|
||||
$(document).ready(function() {
|
||||
var formId = "{$Form.FormName.JS}",
|
||||
errorContainerId = "{$ErrorContainerID.JS}",
|
||||
errorContainer = $('<fieldset><div><h4></h4><ul></ul></div></fieldset>');
|
||||
|
||||
var messages = {<% loop $Fields %><% if $ErrorMessage && not $SetsOwnError %><% if $ClassName == 'EditableCheckboxGroupField' %>
|
||||
'{$Name.JS}[]': '{$ErrorMessage.JS}'<% if not Last %>,<% end_if %><% else %>
|
||||
'{$Name.JS}': '{$ErrorMessage.JS}'<% if not Last %>,<% end_if %><% end_if %><% end_if %><% end_loop %>
|
||||
};
|
||||
|
||||
$(document).on("click", "input.text[data-showcalendar]", function() {
|
||||
$(this).ssDatepicker();
|
||||
|
||||
if($(this).data('datepicker')) {
|
||||
$(this).datepicker('show');
|
||||
}
|
||||
});
|
||||
|
||||
$("#" + formId).validate({
|
||||
ignore: ':hidden',
|
||||
errorClass: "required",
|
||||
errorElement: "span",
|
||||
errorPlacement: function(error, element) {
|
||||
error.addClass('message');
|
||||
|
||||
if(element.is(":radio") || element.parents(".checkboxset").length > 0) {
|
||||
error.insertAfter(element.closest("ul"));
|
||||
} else {
|
||||
error.insertAfter(element);
|
||||
}
|
||||
|
||||
<% if $DisplayErrorMessagesAtTop %>
|
||||
applyTopErrorMessage(element, error.html());
|
||||
<% end_if %>
|
||||
},
|
||||
success: function (error) {
|
||||
error.remove();
|
||||
},
|
||||
messages: messages,
|
||||
rules: {
|
||||
<% loop $Fields %>
|
||||
<% if $Validation %><% if ClassName == EditableCheckboxGroupField %>
|
||||
'{$Name.JS}[]': {$ValidationJSON.RAW},
|
||||
<% else %>
|
||||
'{$Name.JS}': {$ValidationJSON.RAW},
|
||||
<% end_if %><% end_if %>
|
||||
<% end_loop %>
|
||||
}
|
||||
|
||||
/*
|
||||
* Conditional options.
|
||||
* Using leading commas so we don't get a trailing comma on
|
||||
* the last option. Trailing commas can break IE.
|
||||
*/
|
||||
<% if $EnableLiveValidation %>
|
||||
// Enable live validation
|
||||
,onfocusout: function (element) { this.element(element); }
|
||||
<% end_if %>
|
||||
|
||||
<% if $DisplayErrorMessagesAtTop %>
|
||||
,invalidHandler: function (event, validator) {
|
||||
var errorList = $('#' + errorContainerId + ' ul');
|
||||
|
||||
// Update the error list with errors from the validator.
|
||||
// We do this because top messages are not part of the regular
|
||||
// error message life cycle, which jquery.validate handles for us.
|
||||
errorList.empty();
|
||||
|
||||
$.each(validator.errorList, function () {
|
||||
applyTopErrorMessage($(this.element), this.message);
|
||||
});
|
||||
}
|
||||
,onfocusout: false
|
||||
<% end_if %>
|
||||
});
|
||||
|
||||
<% if $HideFieldLabels %>
|
||||
// Hide field labels (use HTML5 placeholder instead)
|
||||
$("#" + formId + "label.left").each(function() {
|
||||
$("#"+$(this).attr("for"))
|
||||
.attr("placeholder", $(this).text());
|
||||
$(this).remove();
|
||||
});
|
||||
Placeholders.init();
|
||||
<% end_if %>
|
||||
|
||||
<% if $DisplayErrorMessagesAtTop %>
|
||||
/**
|
||||
* @applyTopErrorMessage
|
||||
* @param {jQuery} input - The jQuery input object which contains the field to validate
|
||||
* @param {string} message - The error message to display (html escaped)
|
||||
* @desc Update an error message (displayed at the top of the form).
|
||||
*/
|
||||
function applyTopErrorMessage(input, message) {
|
||||
var inputID = input.attr('id'),
|
||||
anchor = '#' + inputID,
|
||||
elementID = inputID + '-top-error',
|
||||
errorContainer = $('#' + errorContainerId),
|
||||
messageElement = $('#' + elementID),
|
||||
describedBy = input.attr('aria-describedby');
|
||||
|
||||
// The 'message' param will be an empty string if the field is valid.
|
||||
if (!message) {
|
||||
// Style issues as fixed if they already exist
|
||||
messageElement.addClass('fixed');
|
||||
return;
|
||||
}
|
||||
|
||||
messageElement.removeClass('fixed');
|
||||
errorContainer.show();
|
||||
|
||||
if (messageElement.length === 1) {
|
||||
// Update the existing error message.
|
||||
messageElement.show().find('a').html(message);
|
||||
} else {
|
||||
// Generate better link to field
|
||||
input.closest('.field[id]').each(function(){
|
||||
anchor = '#' + $(this).attr('id');
|
||||
});
|
||||
|
||||
// Add a new error message
|
||||
messageElement = $('<li><a></a></li>');
|
||||
messageElement
|
||||
.attr('id', elementID)
|
||||
.find('a')
|
||||
.attr('href', location.pathname + location.search + anchor)
|
||||
.html(message);
|
||||
errorContainer
|
||||
.find('ul')
|
||||
.append(messageElement);
|
||||
|
||||
// link back to original input via aria
|
||||
// Respect existing non-error aria-describedby
|
||||
if ( !describedBy ) {
|
||||
describedBy = elementID;
|
||||
} else if ( !describedBy.match( new RegExp( "\\b" + elementID + "\\b" ) ) ) {
|
||||
// Add to end of list if not already present
|
||||
describedBy += " " + elementID;
|
||||
}
|
||||
input.attr( "aria-describedby", describedBy );
|
||||
}
|
||||
}
|
||||
|
||||
// Build container
|
||||
errorContainer
|
||||
.hide()
|
||||
.attr('id', errorContainerId)
|
||||
.find('h4')
|
||||
.text(ss.i18n._t(
|
||||
"UserForms.ERROR_CONTAINER_HEADER",
|
||||
"Please correct the following errors and try again:"
|
||||
));
|
||||
$('#' + formId).prepend(errorContainer);
|
||||
<% end_if %>
|
||||
});
|
||||
})(jQuery);
|
||||
Loading…
Reference in New Issue
Block a user