CSC/ECE 517 Spring 2016/Mozilla Implement HTML5 form validation

Implement HTML5 form validation

Servo is a prototype web browser engine being developed by Mozilla and written in the Rust language. This project implements HTML5HTML5 validations for servo.

Introduction

The HTML5HTML5 is a markup language used for displaying content on the World Wide Web

HTML5 defines set of specification which users needs to follow to make web pages [1]HTML5 compliant. defines a mechanism by which website authors can require browsers to validate the contents of forms before the user is allowed to submit them. Servo currently implements support for a subset of the form element types defined by the specification; this project is intended to implement the client-side validations steps and extend the supported subset to include additional form elements that support validation.

Servo

ServoServo is an open source prototype web browser layout engine being developed by Mozilla, and it is written in Rust language. The main idea is to create a highly parallel environment, in which different components can be handled by fine grained, isolated tasks. The different components can be rendering, HTML parsing, etc.

Rust

Rust is an open source systems programming language developed by Mozilla. Servo is written in Rust. The main purpose behind it's design is to be thread safe and concurrent. The emphasis is also on speed, safety and control of memory layout.

Project Description

• The project requirement initially stated that we build and Compile servo. Following are the steps for this:

Servo is built with Cargo, the Rust package manager. Mozilla's Mach tools are used to orchestrate the build and other tasks.

   git clone https://github.com/servo/servo
   cd servo
   ./mach build --dev
   ./mach run tests/html/about-mozilla.html

• The next requirement was to uncomment the attributes in ValidityState.weidl and fix the resulting build errors by implementing appropriate stub methods in validitystate.rs
• Next, we had to modify the ValidityState constructor to take an &Element argument and store it as element variable of JS<Element> type member in the ValidityState.
• The changes to the constructor resulted in build errors in following files

htmlselectelement.rs htmloutputelement.rs htmlobjectelement.rs htmlfieldsetelement.rs htmlbuttonelement.rs So, the constructors called in these files were modified to send the required extra parameter.

• Next, we had to add a new enum “ValidityStatus” in ValidityState having each possible validity check in ValidityState.
• Next, we had to define a new trait Validatable having method “is_instance_validatable”. (which takes the new ValidityStatus enum as an argument.)
• Next, we implemented this trait and the corresponding method in the following files

htmltextareaelement.rs htmlselectelement.rs htmllabelelement.rs htmlinputelement.rs htmlbuttonelement.rs htmlanchorelement.rs

• Then, we had to define method as_maybe_validatable in file “element.rs” which returns an &Validatable value if the element implements the newly defined trait.
• Finally, we added a new html file “form_html5_validations.html” to test the HTML5 validation for the mentioned conditions

Design Pattern

We attempted to follow good OO practices by implementing the Strategy design pattern using Enum.

Conclusion

As a result of these initial changes, currently validation of the form elements has a basic implementation of the code required. The enum “ValidityStatus” is used to identify different states for the element. For each element in the form, the flow goes in this manner - First the “as_maybe_validatable” method in the element.rs file is called, which in turn finds out the type of the element and then calls the “is_instance_validatable” method on that element. After making our changes , the user can now dynamically pass in the option of GL or ES2 through the graphic command line option, and this option is passed on through the compositor to the rust layers during initialization. A video demonstration for the code changes is available here

References

1. https://doc.rust-lang.org/stable/book/
2. https://en.wikipedia.org/wiki/Rust_(programming_language)
3. https://en.wikipedia.org/wiki/Servo_(layout_engine)
4. https://github.com/servo/servo/wiki/Form-validation-student-project
5. https://doc.rust-lang.org/book/