Schematron on the Browser: JavaScript, CSS3 selectors, JQuery, Regex, JSON

Validation of structured web pages on the client side!

By Rick Jelliffe
May 14, 2009 | Comments: 4

A colleague, Christophe Lauret, sits a few desks down from me. He has been working on the PageSeeder web-based collaborative environment, and he called me over last week to show me a really interesting new use of Schematron.

This was Schematron run from inside JavaScript on the web-browser, editing structured documents/data trascribed to HTML. I'll try to get a screengrab, but it is pretty neat. Click "validate" and a box comes up with a list of the validation problems; click on of those and the corresponding text or element is background-highlighted. Very slick.

What is particularly interesting is the implementation approach. Schematron allows you to use different query languages apart from XSLT/XPath. Christophe has use CSS3 Selectors for the rule contexts, and the assertion tests can be JavaScript regular expression, or JavaScript functions using the JQuery library. His trick is to first convert the Schematron schema into JSON, saving a loadtime parse/iterate/eval stage.

It looks slick, acts fast, and provides pretty powerful validation. The kinds of HTML documents being edited are relatively simple, so the implementation did not need optimization.

And how many lines of code did this take? About 300 lines of JavaScript, with I'd say a commented LOC at 25%. This is what frustrates me about schemas. It is so easy to get a really good level of validation trivially by just providing a simple framework and then usign existing minilanguages or libraries: that is all Schematron does, really. But the result does so much of what people need.

I'll post some extra info when it comes to hand.


You might also be interested in:

4 Comments

Sounds handy. Any chance that the Javascript/JSON implementation of Schematron will be released to the public? It would help drive Schematron adoption, I think.

I'm in charge of XSLTForms which is a client-side implementation of XForms 1.1.

XForms uses XML Schema by default and XSLTForms has a basic support for it with a Javascript set of classes. It's good to see that Schematron can also be implemented with Javascript.

Stuart: Especially handy because you have structured editing of HTML (ie validating using the class attribute etc.)

This is of course validating against an architecture, in the old SGML terms. (I see Microsoft's Brian Jones recently got some kind of patent in this area: if it is just architectural validation where you use a schema but operate on names or structures other than the generic identifier of the element, then it is a junk patent.)

I don't know what their plans are for FOSS.

Alain: They use JQuery and CSS, but a more conventional implementation would certainly be possible with a JavaScript version of XPath.

And ISO Schematron is being upgraded to allow more kinds of arbitrary property information in the validation reports, which may improve using editing sessions.

XSLTForms already includes its own Javascript version of XPath 1.0 (XPath expressions are compiled with XSLT 1.0 to Javascript objects) so it might not be too difficult to add Schematron support in XSLTForms !

News Topics

Recommended for You

Got a Question?