Apply user defined values to form

This commit is contained in:
David Craig 2015-08-11 11:40:37 +12:00
parent 8103d869e2
commit 1722e6ba40
7 changed files with 62 additions and 81 deletions

View File

@ -45,7 +45,7 @@ class UserForm extends Form {
}
/**
* @return boolean
* @return int
*/
public function getDisplayErrorMessagesAtTop() {
return $this->controller->DisplayErrorMessagesAtTop;
@ -170,4 +170,20 @@ class UserForm extends Form {
return true;
}
/**
* Override some we can add UserForm specific attributes to the form.
*
* @return array
*/
public function getAttributes() {
$attrs = parent::getAttributes();
$attrs['class'] = $attrs['class'] . ' userform';
$attrs['data-livevalidation'] = (bool)$this->controller->EnableLiveValidation;
$attrs['data-toperrors'] = (bool)$this->controller->DisplayErrorMessagesAtTop;
$attrs['data-hidefieldlabels'] = (bool)$this->controller->HideFieldLabels;
return $attrs;
}
}

View File

@ -24,16 +24,13 @@ class EditableEmailField extends EditableFormField {
}
/**
* Return the validation information related to this field. This is
* interrupted as a JSON object for validate plugin and used in the
* PHP.
* Updates a formfield with the additional metadata specified by this field
*
* @see http://docs.jquery.com/Plugins/Validation/Methods
* @return Array
* @param FormField $field
*/
public function getValidation() {
return array_merge(parent::getValidation(), array(
'email' => true
));
protected function updateFormField($field) {
parent::updateFormField($field);
$field->setAttribute('data-rule-email', true);
}
}

View File

@ -551,25 +551,7 @@ class EditableFormField extends DataObject {
public function showInReports() {
return true;
}
/**
* Return the validation information related to this field. This is
* interrupted as a JSON object for validate plugin and used in the
* PHP.
*
* @see http://docs.jquery.com/Plugins/Validation/Methods
* @return Array
*/
public function getValidation() {
return $this->Required
? array('required' => true)
: array();
}
public function getValidationJSON() {
return Convert::raw2json($this->getValidation());
}
/**
* Return the error message for this field. Either uses the custom
* one (if provided) or the default SilverStripe message

View File

@ -45,14 +45,20 @@ class EditableNumericField extends EditableFormField {
return $fields;
}
public function getValidation() {
$options = array();
/**
* Updates a formfield with the additional metadata specified by this field
*
* @param FormField $field
*/
protected function updateFormField($field) {
parent::updateFormField($field);
if($this->MinValue) {
$options['min'] = (int)$this->MinValue;
$field->setAttribute('data-rule-min', $this->MinValue);
}
if($this->MaxValue) {
$options['max'] = (int)$this->MaxValue;
$field->setAttribute('data-rule-max', $this->MaxValue);
}
return $options;
}
}

View File

@ -73,23 +73,21 @@ class EditableTextField extends EditableFormField {
$this->doUpdateFormField($field);
return $field;
}
/**
* Return the validation information related to this field. This is
* interrupted as a JSON object for validate plugin and used in the
* PHP.
* Updates a formfield with the additional metadata specified by this field
*
* @see http://docs.jquery.com/Plugins/Validation/Methods
* @return array
* @param FormField $field
*/
public function getValidation() {
$options = parent::getValidation();
protected function updateFormField($field) {
parent::updateFormField($field);
if($this->MinLength) {
$options['minlength'] = (int)$this->MinLength;
}
if($this->MaxLength) {
$options['maxlength'] = (int)$this->MaxLength;
$field->setAttribute('data-rule-minlength', $this->MinLength);
}
if($this->MaxLength) {
$field->setAttribute('data-rule-maxlength', $this->MaxLength);
}
return $options;
}
}

View File

@ -3,22 +3,15 @@
*/
jQuery(function ($) {
var $userform = $('.userform');
// Settings that come from the CMS.
var CONSTANTS = {
FORM_ID: 'UserForm_Form', // $Form.FormName.JS
ERROR_CONTAINER_ID: '', // $ErrorContainerID.JS
ENABLE_LIVE_VALIDATION: false, // $EnableLiveValidation
DISPLAY_ERROR_MESSAGES_AT_TOP: false, // $DisplayErrorMessagesAtTop
HIDE_FIELD_LABELS: false, // $HideFieldLabels
MESSAGES: {} // var meaasges
ENABLE_LIVE_VALIDATION: $userform.data('livevalidation') !== void 0,
DISPLAY_ERROR_MESSAGES_AT_TOP: $userform.data('toperrors') !== void 0,
HIDE_FIELD_LABELS: $userform.data('hidefieldlabels') !== void 0
};
// TODO
// 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 %>
// };
// Common functions that extend multiple classes.
var commonMixin = {
/**
@ -91,19 +84,8 @@ jQuery(function ($) {
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'))]);
$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 %>
}
};
@ -307,7 +289,7 @@ jQuery(function ($) {
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) {
$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;
@ -320,7 +302,7 @@ jQuery(function ($) {
});
// Listen for fields becoming valid
this.$el.closest('.userform').on('userform.form.valid', function (e, fieldId) {
$userform.on('userform.form.valid', function (e, fieldId) {
self.errorContainer.removeErrorMessage(fieldId);
});
}
@ -350,7 +332,7 @@ jQuery(function ($) {
});
// Update the progress bar when 'prev' and 'next' buttons are clicked.
$('.userform').on('userform.form.changestep', function (e, newStep) {
$userform.on('userform.form.changestep', function (e, newStep) {
self.update(newStep + 1);
});
@ -434,7 +416,7 @@ jQuery(function ($) {
$.extend(UserForm.prototype.validationOptions, {
// Callback for custom code when an invalid form / step is submitted.
invalidHandler: function (event, validator) {
$('.userform').trigger('userform.form.error', [validator]);
$userform.trigger('userform.form.error', [validator]);
},
onfocusout: false
});
@ -443,12 +425,12 @@ jQuery(function ($) {
// Display all the things that are hidden when JavaScript is disabled.
$('.userform-progress, .step-navigation').attr('aria-hidden', false).show();
userform = new UserForm($('.userform'));
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 () {
$userform.find('label.left').each(function () {
var $label = $(this);
$('[name="' + $label.attr('for') + '"]').attr('placeholder', $label.text());

View File

@ -1,6 +1,6 @@
<% include UserFormProgress %>
<form class="userform" $AttributesHTML>
<form $AttributesHTML>
<% if $Message %>
<p id="{$FormName}_error" class="message $MessageType">$Message</p>
@ -22,9 +22,9 @@
</fieldset>
<% end_if %>
<% loop $Children %>
$FieldHolder
<% end_loop %>
<% loop $Children %>
$FieldHolder
<% end_loop %>
<% include UserFormStepNav ContainingPage=$Top %>
</fieldset>