Preventing Form Submission with Atlas Validation Controls

Atlas' validation controls are quite nice, however — unlike ASP.NET validation controls — they do not integrate in the form submission mechanism. Therefore, even though some validation controls complain, a form can still be submitted.
However there is a rather simple workaround. First, update the <form> tag:

<form onsubmit="return validateForm();">

In the JavaScript function validateForm(), have a look at the get_isInvalid() method of each form elements that should be validated. If get_isInvalid() is false for all elements, validateForm() should return true — the form should be submitted, then. Otherwise, the function has to return false, preventing form submission. Here is an example for a form with a select list and a text field with validators attached:

function validateForm() {
  var textbox = $("TextBox1").control;
  var select = $("Select1").control;
  return !(textbox.get_isInvalid() || select.get_isInvalid());
}

Note that you have to use $("TextBox1").control and $("Select1").control to make it work. Otherwise, (e.g. by using new Web.UI.TextBox($("TextBox1"))), the get_isInvalid() call does not work.