Yaron Koren has submitted this change and it was merged.
Change subject: JS and CSS changes for form validation error display
......................................................................
JS and CSS changes for form validation error display
Patch by Simon Heimler.
Change-Id: I141c8099b3a12152f46ceadce5dfa25935fe5f13
---
M libs/SemanticForms.js
M skins/SemanticForms.css
2 files changed, 30 insertions(+), 16 deletions(-)
Approvals:
Yaron Koren: Verified; Looks good to me, approved
diff --git a/libs/SemanticForms.js b/libs/SemanticForms.js
index 9a006c9..9c31e58 100644
--- a/libs/SemanticForms.js
+++ b/libs/SemanticForms.js
@@ -493,13 +493,14 @@
// Set the error message for an input.
jQuery.fn.setErrorMessage = function(msg, val) {
var container = this.find('.sfErrorMessages');
- container.html($('<span>').addClass( 'errorMessage' ).text( mw.msg(
msg, val ) ));
+ container.html($('<div>').addClass( 'errorMessage' ).text( mw.msg( msg,
val ) ));
};
// Append an error message to the end of an input.
jQuery.fn.addErrorMessage = function(msg, val) {
- var container = this.find('.sfErrorMessages');
- container.append($('<span>').addClass( 'errorMessage' ).text( mw.msg(
msg, val ) ));
+ this.find('input').addClass('inputError');
+ this.find('select2-container').addClass('inputError');
+ this.append($('<div>').addClass( 'errorMessage' ).text( mw.msg( msg,
val ) ));
};
jQuery.fn.isAtMaxInstances = function() {
@@ -647,6 +648,10 @@
};
window.validateAll = function () {
+
+ // Hook that fires on form submission, before the validation.
+ mw.hook('sf.formValidationBefore').fire();
+
var num_errors = 0;
// Remove all old error messages.
@@ -748,6 +753,10 @@
//remove error box if it exists because there are no errors in
the form now
jQuery("#contentSub").find(".errorbox").remove();
}
+
+ // Hook that fires on form submission, after the validation.
+ mw.hook('sf.formValidationAfter').fire();
+
return (num_errors === 0);
};
diff --git a/skins/SemanticForms.css b/skins/SemanticForms.css
index da3878f..5f39883 100644
--- a/skins/SemanticForms.css
+++ b/skins/SemanticForms.css
@@ -12,26 +12,26 @@
/* Used in 'create template' page */
.fieldBox {
- border: 1px black solid;
- background: #dddddd;
- padding: 10px 20px 10px 20px;
- margin: 0 20px 20px 20px;
+ border: 1px black solid;
+ background: #dddddd;
+ padding: 10px 20px 10px 20px;
+ margin: 0 20px 20px 20px;
}
/* Used in 'create form' page */
.templateForm {
- border: 1px black solid;
- background: #dddddd;
- padding: 0 20px 10px 20px;
- margin-bottom: 20px;
+ border: 1px black solid;
+ background: #dddddd;
+ padding: 0 20px 10px 20px;
+ margin-bottom: 20px;
}
/* Used in 'create form' page */
.sectionForm {
- border: 1px black solid;
- background: #d0dae6;
- padding: 0 20px 10px 20px;
- margin-bottom: 20px;
+ border: 1px black solid;
+ background: #d0dae6;
+ padding: 0 20px 10px 20px;
+ margin-bottom: 20px;
}
/* Used in form pages */
@@ -89,9 +89,14 @@
background: #eeeeee;
}
-span.errorMessage {
+div.errorMessage {
color: red;
+ margin: 1px 0 4px 0;
}
+.inputError {
+ background: #FCEEEE;
+}
+
.multipleTemplateInstance {
background-color: #dddddd;
border: 1px solid #cccccc;
--
To view, visit https://gerrit.wikimedia.org/r/186259
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I141c8099b3a12152f46ceadce5dfa25935fe5f13
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/SemanticForms
Gerrit-Branch: master
Gerrit-Owner: Yaron Koren <[email protected]>
Gerrit-Reviewer: Yaron Koren <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
