Home

What is Uniform?

• Have you tried to implement simple form logic but find yourself with a mess of unmaintainable code?
• Do you find yourself fighting the JavaScript language, rather than working with it?
• Do you hate writing your form validation once on the client, and again on the server?

These frustrating moments were the inspiration for creating Uniform.

Uniform is a new logic language that simplifies HTML <form> validation traditionally written in JavaScript.

Uniform is the logical solution for form validation.

Design Philosophy

The design philosophy of the Uniform language is accurate, efficient, and accessible digital form validation.

• Uniform code should follow natural spoken language
• Think it, don't program it
• Easy to learn and understand, even for non-programmers
• Allow for smarter forms
• Simple in design, but powerful and versatile
• One language serves client and server

The Uniform language allows users to easily set validation rules for HTML web forms and validate them. Additionally, the language allows a means to define relationships between form controls and allow the form to change dynamically based on both user input and the status of other controls. The language is also able to be executed server-side to allow the same piece of Uniform code to validate both the client-side HTML form and the server-side request data without requiring a customized solution for either.

Uniform is the pain-free solution for any web form.

Example

TODO: This example is very out-of-date to the point of almost meaninglessness. See the README for a more up-to-date example.

Description

The form asks the user to answer two questions:

• Do you have a car?
• If so, what is its make, model, and year?

The following HTML markup constructs a web form for the user to fill out.

HTML Form

<form id="carForm" method="POST" action="/submit">
  <input name="checkCar" type="checkbox">I have a car</input>
  <div id="subForm">
    Make:  <input name="make"  type="text" /><br />
    Model: <input name="model" type="text" /><br />
    Year:  <input name="year"  type="text" /><br />
  </div>
  <button type="submit">Submit</button>
</form>

Uniform Validation

If the user does not have a car, then the following questions, asking the make, model, and year, are irrelevant. As the form builder, I would like the form to adjust depending on the user's input, disabling the following three fields. So I would think to myself:

• If the check box is not checked, disable the make, model, and year textboxes.

The following Uniform code will apply the intended logic defined above:

// Regular expression matching any non-empty string
@filled: /"."/; 

// Regular expression matching 4-digit year (ex. 2016)
@year: /"^[0-9]{4}$"/; 

// The form is valid when the user does not have a car
// Or they have provided car information is valid
valid: checkCar equals false
       or @subForm.valid;

// The car information is valid when the make is filled,
// the model is filled, and the year is a 4-digit integer.
@subForm {
    valid: 
        make  matches @filled and
        model matches @filled and
        year  matches @year;
}

// Only enable make, model, and year when the user has a car.
// Disable the fields when the user does NOT have a car.
make, model, year {
    enabled: checkCar;
}

When the user submits the form, Uniform will automatically validate it and stop the submission if it was filled out incorrectly.

If you do want some extra JavaScript logic on top of Uniform, you can extract the validity of the entire form using uniform.root.valid.value:

if (uniform.root.valid.value) alert("Valid!");
else alert("Invalid!");

or you can listen to the ufm:update event:

$(document).on("ufm:update", function (evt, tag, token) {
    if (tag === "valid") alert(token.value); // true, false
});