Apply user defined values to form

code/forms/UserForm.php

@@ -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;
+	}
 }

code/model/editableformfields/EditableEmailField.php

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

code/model/editableformfields/EditableFormField.php

@@ -552,24 +552,6 @@ class EditableFormField extends DataObject {
 		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

code/model/editableformfields/EditableNumericField.php

@@ -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;
 	}
 }

code/model/editableformfields/EditableTextField.php

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

javascript/UserForm.js

@@ -3,22 +3,15 @@
  */
 jQuery(function ($) {
 
+	var $userform = $('.userform');
+
 	// Settings that come from the CMS.
 	var CONSTANTS = {
-		FORM_ID: 'UserForm_Form', // $Form.FormName.JS
+		ENABLE_LIVE_VALIDATION: $userform.data('livevalidation') !== void 0,
-		ERROR_CONTAINER_ID: '', // $ErrorContainerID.JS
+		DISPLAY_ERROR_MESSAGES_AT_TOP: $userform.data('toperrors') !== void 0,
-		ENABLE_LIVE_VALIDATION: false, // $EnableLiveValidation
+		HIDE_FIELD_LABELS: $userform.data('hidefieldlabels') !== void 0
-		DISPLAY_ERROR_MESSAGES_AT_TOP: false, // $DisplayErrorMessagesAtTop
-		HIDE_FIELD_LABELS: false, // $HideFieldLabels
-		MESSAGES: {} // var meaasges
 	};
 
-	// 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());

templates/UserForm.ss

@@ -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 %>
+			<% loop $Children %>
-		$FieldHolder
+			$FieldHolder
-		<% end_loop %>
+			<% end_loop %>
 
 			<% include UserFormStepNav ContainingPage=$Top %>
 		</fieldset>