Bug 490767: Make validation happen with JS, when filing a bug

js/field.js

@@ -22,6 +22,72 @@
 /* This library assumes that the needed YUI libraries have been loaded 
    already. */
 
+function validateEnterBug(theform) {
+    var component = theform.component;
+    var short_desc = theform.short_desc;
+    var version = theform.version;
+    var bug_status = theform.bug_status;
+    var description = theform.comment;
+    var attach_data = theform.data;
+    var attach_desc = theform.description;
+
+    var current_errors = YAHOO.util.Dom.getElementsByClassName(
+        'validation_error_text', null, theform);
+    for (var i = 0; i < current_errors.length; i++) {
+        current_errors[i].parentNode.removeChild(current_errors[i]);
+    }
+    var current_error_fields = YAHOO.util.Dom.getElementsByClassName(
+        'validation_error_field', null, theform);
+    for (var i = 0; i < current_error_fields.length; i++) {
+        var field = current_error_fields[i];
+        YAHOO.util.Dom.removeClass(field, 'validation_error_field');
+    }
+
+    var focus_me;
+
+    // These are checked in the reverse order that they appear on the page,
+    // so that the one closest to the top of the form will be focused.
+    if (attach_data.value && YAHOO.lang.trim(attach_desc.value) == '') {
+        _errorFor(attach_desc, 'attach_desc');
+        focus_me = attach_desc;
+    }
+    var check_description = status_comment_required[bug_status.value];
+    if (check_description && YAHOO.lang.trim(description.value) == '') {
+        _errorFor(description, 'description');
+        focus_me = description;
+    }
+    if (YAHOO.lang.trim(short_desc.value) == '') {
+        _errorFor(short_desc);
+        focus_me = short_desc;
+    }
+    if (version.selectedIndex < 0) {
+        _errorFor(version);
+        focus_me = version;
+    }
+    if (component.selectedIndex < 0) {
+        _errorFor(component);
+        focus_me = component;
+    }
+
+    if (focus_me) {
+        focus_me.focus();
+        return false;
+    }
+
+    return true;
+}
+
+function _errorFor(field, name) {
+    if (!name) name = field.id;
+    var string_name = name + '_required';
+    var error_text = BUGZILLA.string[string_name];
+    var new_node = document.createElement('div');
+    YAHOO.util.Dom.addClass(new_node, 'validation_error_text');
+    new_node.innerHTML = error_text;
+    YAHOO.util.Dom.insertAfter(new_node, field);
+    YAHOO.util.Dom.addClass(field, 'validation_error_field');
+}
+
 function createCalendar(name) {
     var cal = new YAHOO.widget.Calendar('calendar_' + name, 
                                         'con_calendar_' + name);

skins/standard/global.css

@@ -545,3 +545,17 @@ input.required, select.required, span.required_explanation {
     overflow-x: hidden;
     margin-left: -1px;
 }
+
+/*******************/
+/* Form Validation */
+/*******************/
+
+.validation_error_text {
+    font-size: 120%;
+    color: #152446;
+    font-weight: bold;
+}
+
+.validation_error_field {
+    border: 2px solid #152446;
+}

template/en/default/bug/create/create.html.tmpl

@@ -160,6 +160,11 @@ function handleWantsAttachment(wants_attachment) {
     }
 }
 
+var status_comment_required = new Array();
+[% FOREACH status = bug_status %]
+  status_comment_required['[% status.name FILTER js %]'] = 
+    [% status.comment_required_on_change_from() ? 'true' : 'false' %]
+[% END %]
 
 TUI_alternates['expert_fields'] = 'Show Advanced Fields';
 // Hide the Advanced Fields by default, unless the user has a cookie
@@ -170,7 +175,8 @@ TUI_hide_default('expert_fields');
 </script>
 
 <form name="Create" id="Create" method="post" action="post_bug.cgi"
-      class="enter_bug_form" enctype="multipart/form-data">
+      class="enter_bug_form" enctype="multipart/form-data"
+      onsubmit="return validateEnterBug(this)">
 <input type="hidden" name="product" value="[% product.name FILTER html %]">
 <input type="hidden" name="token" value="[% token FILTER html %]">
 
@@ -278,7 +284,7 @@ TUI_hide_default('expert_fields');
       field = bug_fields.version editable = 1 rowspan = 3 
     %]
     <td rowspan="3">
-      <select name="version" size="5">
+      <select name="version" id="version" size="5">
         [%- FOREACH v = version %]
           <option value="[% v FILTER html %]"
             [% ' selected="selected"' IF v == default.version %]>[% v FILTER html -%]
@@ -695,10 +701,7 @@ TUI_hide_default('expert_fields');
   <tr>
     <th>&nbsp;</th>
     <td colspan="3">
-      <input type="submit" id="commit" value="Submit [% terms.Bug %]"
-             onclick="if (this.form.short_desc.value == '')
-             { alert('Please enter a summary sentence for this [% terms.bug %].');
-               return false; } return true;">
+      <input type="submit" id="commit" value="Submit [% terms.Bug %]">
       &nbsp;&nbsp;&nbsp;&nbsp;
       <input type="submit" name="maketemplate" id="maketemplate"
              value="Remember values as bookmarkable template"

template/en/default/global/header.html.tmpl

@@ -271,8 +271,18 @@
             },
 
             string: {
+                [%# Please keep these in alphabetical order. %]
+
                 attach_desc_required:
-                    'You must enter a Description for this attachment.'
+                    'You must enter a Description for this attachment.',
+                component_required:
+                    'You must select a Component for this [% terms.bug %].',
+                description_required:
+                    'You must enter a Description for this [% terms.bug %].',
+                short_desc_required:
+                    'You must enter a Summary for this [% terms.bug %].',
+                version_required:
+                    'You must select a Version for this [% terms.bug %].',
             }
         };
         [% IF javascript %]