tonyair/silverstripe-userforms
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-userforms.git synced 2024-09-28 20:29:27 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #316 from scott1702/master

Browse Source 
focus on first invalid field after form validation
This commit is contained in:
Damian Mooyman 2015-08-27 16:16:10 +12:00
commit ac731067a8
1 changed files with 28 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
javascript/UserForm.js
View File

@ -43,7 +43,7 @@ jQuery(function ($) {
// Add an error container which displays a list of invalid steps on form submission. // Add an error container which displays a list of invalid steps on form submission.
this.errorContainer = new ErrorContainer(this.$el.children('.error-container')); this.errorContainer = new ErrorContainer(this.$el.children('.error-container'));
// Listen for events triggered my form steps. // Listen for events triggered by form steps.
this.$el.on('userform.action.prev', function (e) { this.$el.on('userform.action.prev', function (e) {
self.prevStep(); self.prevStep();
}); });
@ -63,6 +63,13 @@ jQuery(function ($) {
this.$el.validate(this.validationOptions); this.$el.validate(this.validationOptions);
// Ensure checkbox groups are validated correctly
$('.optionset.requiredField input').each(function() {
$(this).rules('add', {
required: true
});
});
return this; return this;
} }
@ -76,12 +83,20 @@ jQuery(function ($) {
errorPlacement: function (error, element) { errorPlacement: function (error, element) {
error.addClass('message'); error.addClass('message');
if(element.is(':radio') || element.parents('.checkboxset').length > 0) { if (element.is(':radio') || element.parents('.checkboxset').length > 0) {
error.insertAfter(element.closest('ul')); error.insertAfter(element.closest('ul'));
} else if (element.parents('.checkbox').length > 0) {
error.insertAfter(element.next('label'));
} else { } else {
error.insertAfter(element); error.insertAfter(element);
} }
}, },
invalidHandler: function (event, validator) {
//setTimeout 0 so it runs after errorPlacement
setTimeout(function () {
validator.currentElements.filter('.error').first().focus();
}, 0);
},
// Callback for handling the actual submit when the form is valid. // Callback for handling the actual submit when the form is valid.
// Submission in the jQuery.validate sence is handled at step level. // Submission in the jQuery.validate sence is handled at step level.
// So when the final step is submitted we have to also check all previous steps are valid. // So when the final step is submitted we have to also check all previous steps are valid.
@ -109,12 +124,21 @@ jQuery(function ($) {
}, },
// When a field becomes valid. // When a field becomes valid.
success: function (error) { success: function (error) {
var errorId = $(error).attr('id'); var errorId = $(error).attr('id'),
fieldId = errorId.substr(0, errorId.indexOf('-error')),
isCheckboxGroup = $(error).closest('.requiredField').hasClass('checkboxset');
// We need to escapse the field id if it's a checkboxfield
// because jQuery breaks when using selector that end with
// square brackets.
if (isCheckboxGroup) {
fieldId = fieldId.replace('[]', '\\\\[\\\\]');
}
error.remove(); error.remove();
// Pass the field's ID with the event. // Pass the field's ID with the event.
userform.$el.trigger('userform.form.valid', [errorId.substr(0, errorId.indexOf('-error'))]); userform.$el.trigger('userform.form.valid', [fieldId]);
} }
}; };