Help:JavaScript validation

Screenshot of an early version of JSValidator's extra controls

This is the documentation for MediaWiki:JSValidator.js.

Purpose of JavaScript validationEdit

The purpose of JavaScript validation is finding potential problems before saving and enhancing readability and reliability of JavaScript hosted on this project.

How JSValidator works?Edit

When you press "Save page", the validator will ensure that there aren't common JavaScript flaws in the script that should be saved, or at least that the script won't throw JavaScript errors like you find them in your JavaScript console (Ctrl+ Shift+J).

Eval-ValidationEdit

An error-report that was generated after a click on "Save page"

If you don't specify the tool JSValidator should use, JSValidator will prompt you while saving the JavaScript to execute it before saving. If errors are detected during this execution, they will be listed, otherwise the document will be saved.

JSHintEdit

We have a JavaScript copy of the popular jsHint-Tool on Wikimedia Commons. If you like it, you can enforce validation using

// This script is jsHint-valid

somewhere in your code. There is a regular expression in MediaWiki:JSValidator.js that will look-up whether the script contains such a phrase (/jshint.valid/i) while saving.

JSLintEdit

We have a JavaScript copy of the popular jsLint-Tool on Wikimedia Commons. If you like it, you can enforce validation using

// This script is jsLint-valid

somewhere in your code. There is a regular expression in MediaWiki:JSValidator.js that will look-up whether the script contains such a phrase (/jslint.valid/i) while saving.

No, I don't want it!Edit

Uncheck "JavaScript-Validation" before saving.

The jsBeautifier control panel

jsBeautifierEdit

JSBeautifier allows you to escape unsafe characters to the according Unicode representation and to re-format the whole script in just one click. This is useful when porting obfuscated scripts to this project or when dealing with RTL-language-translations.

Common fixes to common problemsEdit

You can set validation-options in your JavaScript. For example:

/*jshint curly:false, laxbreak:true, bitwise:false */
/*global jQuery:false, mediaWiki:false*/

This prevents warning about conditional statements that are not written in block-style (if (a === b) {), line-breaks before operators like the +-concatenation (thus having them as first char at the new line), and byte-shifting-operators, for example.

It makes jsHint also aware that there is a jQuery-object in the global window-space and a mediaWiki-object.

Why using these odd options? They can be considered as a TODO-List or can easily tell you why something does not work (e.g. if a global is missing, for…in loop over a prototyped array, …).

Here is a list of issues the tools often complain about and possible solutions. Please also confer to http://www.jshint.com/options/ and http://www.jslint.com/

  • Extra comma: Remove it.
  • Unsafe character: Use jsBeautifier on Commons.
  • Missing semicolon: Add it.
  • Missing 'use strict': Add it. Consider also using a "javascript power constructor" or an IIFE so you can write the it directly below the function-keyword.
Last modified on 7 August 2012, at 07:20