661a1c4b4786e5101d5fe5e712236491a4671d60
3 // FIXME: mw.htmlform.Element also sets this to empty object
7 * @class mw.htmlform.Checker
11 * A helper class to add validation to non-OOUI HtmlForm fields.
14 * @param {jQuery} $element Form field generated by HTMLForm
15 * @param {Function} validator Validation callback
16 * @param {string} validator.value Value of the form field to be validated
17 * @param {jQuery.Promise} validator.return The promise should be resolved
18 * with an object with two properties: Boolean 'valid' to indicate success
19 * or failure of validation, and an array 'messages' to be passed to
20 * setErrors() on failure.
22 mw
.htmlform
.Checker = function ( $element
, validator
) {
23 this.validator
= validator
;
24 this.$element
= $element
;
26 this.$errorBox
= $element
.next( '.error' );
27 if ( !this.$errorBox
.length
) {
28 this.$errorBox
= $( '<span>' );
29 this.$errorBox
.hide();
30 $element
.after( this.$errorBox
);
33 this.currentValue
= this.$element
.val();
37 * Attach validation events to the form element
39 * @param {jQuery} [$extraElements] Additional elements to listen for change
41 * @return {mw.htmlform.Checker}
44 mw
.htmlform
.Checker
.prototype.attach = function ( $extraElements
) {
46 // We need to hook to all of these events to be sure we are
47 // notified of all changes to the value of an <input type=text>
49 events
= 'keyup keydown change mouseup cut paste focus blur';
52 if ( $extraElements
) {
53 $e
= $e
.add( $extraElements
);
55 $e
.on( events
, $.debounce( 1000, this.validate
.bind( this ) ) );
61 * Validate the form element
62 * @return {jQuery.Promise}
64 mw
.htmlform
.Checker
.prototype.validate = function () {
65 var currentRequestInternal
,
67 value
= this.$element
.val();
69 // Abort any pending requests.
70 if ( this.currentRequest
&& this.currentRequest
.abort
) {
71 this.currentRequest
.abort();
75 this.currentValue
= value
;
80 this.currentRequest
= currentRequestInternal
= this.validator( value
)
81 .done( function ( info
) {
82 var forceReplacement
= value
!== that
.currentValue
;
84 // Another request was fired in the meantime, the result we got here is no longer current.
85 // This shouldn't happen as we abort pending requests, but you never know.
86 if ( that
.currentRequest
!== currentRequestInternal
) {
89 // If we're here, then the current request has finished, avoid calling .abort() needlessly.
90 that
.currentRequest
= undefined;
92 that
.currentValue
= value
;
95 that
.setErrors( [], forceReplacement
);
97 that
.setErrors( info
.messages
, forceReplacement
);
99 } ).fail( function () {
100 that
.currentValue
= null;
101 that
.setErrors( [] );
104 return currentRequestInternal
;
108 * Display errors associated with the form element
109 * @param {Array} errors Error messages. Each error message will be appended to a
110 * `<span>` or `<li>`, as with jQuery.append().
111 * @param {boolean} [forceReplacement] Set true to force a visual replacement even
112 * if the errors are the same. Ignored if errors are empty.
113 * @return {mw.htmlform.Checker}
116 mw
.htmlform
.Checker
.prototype.setErrors = function ( errors
, forceReplacement
) {
117 var $oldErrorBox
, tagName
, showFunc
, text
, replace
,
118 $errorBox
= this.$errorBox
;
120 if ( errors
.length
=== 0 ) {
121 // FIXME: Use CSS transition
122 // eslint-disable-next-line jquery/no-slide
123 $errorBox
.slideUp( function () {
125 .removeAttr( 'class' )
129 // Match behavior of HTMLFormField::formatErrors(), <span> or <ul>
130 // depending on the count.
131 tagName
= errors
.length
=== 1 ? 'span' : 'ul';
133 // We have to animate the replacement if we're changing the tag. We
134 // also want to if told to by the caller (i.e. to make it visually
135 // obvious that the changed field value gives the same error) or if
136 // the error text changes (because it makes more sense than
137 // changing the text with no animation).
139 forceReplacement
|| $errorBox
.length
> 1 ||
140 $errorBox
[ 0 ].tagName
.toLowerCase() !== tagName
143 text
= $( '<' + tagName
+ '>' )
144 .append( errors
.map( function ( e
) {
145 return errors
.length
=== 1 ? e
: $( '<li>' ).append( e
);
147 if ( text
.text() !== $errorBox
.text() ) {
152 $oldErrorBox
= $errorBox
;
154 this.$errorBox
= $errorBox
= $( '<' + tagName
+ '>' );
156 $oldErrorBox
.after( this.$errorBox
);
159 showFunc = function () {
160 if ( $oldErrorBox
!== $errorBox
) {
162 .removeAttr( 'class' )
165 // FIXME: Use CSS transition
166 // eslint-disable-next-line jquery/no-slide
168 .attr( 'class', 'error' )
170 .append( errors
.map( function ( e
) {
171 return errors
.length
=== 1 ? e
: $( '<li>' ).append( e
);
175 if ( $oldErrorBox
!== $errorBox
&& $oldErrorBox
.hasClass( 'error' ) ) {
176 // eslint-disable-next-line jquery/no-slide
177 $oldErrorBox
.slideUp( showFunc
);