Merge branch '829/validation'

okfn · Nov 24, 2016 · 945c8fe · 945c8fe
2 parents 94e5dbc + 040fa07
commit 945c8fe
Show file tree

Hide file tree

Showing 9 changed files with 225 additions and 57 deletions.
diff --git a/census/static/css/styles.css b/census/static/css/styles.css
diff --git a/census/static/css/styles.css.map b/census/static/css/styles.css.map
diff --git a/census/static/scss/_form-layout.scss b/census/static/scss/_form-layout.scss
@@ -182,6 +182,11 @@ body.form {
         }
       }
 
+      .field-errors {
+        @include make-md-column(8);
+        @include make-md-column-offset(4);
+      }
+
       .current {
         @include make-md-column(4);
         clear: left;
@@ -666,6 +671,10 @@ body.form {
       }
 
       &.submit {
+        form {
+          float: left;
+          margin-right: $grid-gutter-width/2;
+        }
         button {
           background-color: $text-color;
           color: #fff;

diff --git a/census/ui_app/EntryForm.jsx b/census/ui_app/EntryForm.jsx
@@ -6,48 +6,65 @@ import * as helpers from './HelperFields.jsx';
 const EntryForm = React.createClass({
 
   _post(targetForm) {
-    // disable all buttons
-    $('button').attr('disabled', 'disable');
-
-    let form = $('<form>').attr({ // eslint-disable-line quote-props
-      method: 'post',
-      'accept-charset': 'utf-8'
-    });
-
-    let questionData = this.refs.questions.state.questionState;
-    $('<input>').attr({
-      type: 'hidden',
-      name: 'answers',
-      value: JSON.stringify(questionData)
-    }).appendTo(form);
-
-    let aboutYouQuestionData = this.refs.yourKnowledgeQuestions.state.questionState;
-    $('<input>').attr({
-      type: 'hidden',
-      name: 'aboutYouAnswers',
-      value: JSON.stringify(aboutYouQuestionData)
-    }).appendTo(form);
-
-    let additionalInputs = $('.uncontrolled-fields :input').serializeArray();
-    for (let i in additionalInputs) {
-      if (additionalInputs.hasOwnProperty(i)) {
+    // disable submit buttons
+    $('.submit button').attr('disabled', 'disable');
+
+    let reviewAction =
+      $(targetForm).find('button[name=reviewAction]').val();
+    let questionsValid = this.refs.questions.validate();
+    let yourKnowledgeValid = this.refs.yourKnowledgeQuestions.validate();
+
+    // We can proceed if the form questions are valid, or if we're rejecting
+    // the entry.
+    if ((questionsValid && yourKnowledgeValid) || reviewAction === 'reject') {
+      let form = $('<form>').attr({ // eslint-disable-line quote-props
+        method: 'post',
+        'accept-charset': 'utf-8'
+      });
+
+      let questionData = this.refs.questions.state.questionState;
+      $('<input>').attr({
+        type: 'hidden',
+        name: 'answers',
+        value: JSON.stringify(questionData)
+      }).appendTo(form);
+
+      let aboutYouQuestionData =
+        this.refs.yourKnowledgeQuestions.state.questionState;
+      $('<input>').attr({
+        type: 'hidden',
+        name: 'aboutYouAnswers',
+        value: JSON.stringify(aboutYouQuestionData)
+      }).appendTo(form);
+
+      let additionalInputs = $('.uncontrolled-fields :input').serializeArray();
+      for (let i in additionalInputs) {
+        if (additionalInputs.hasOwnProperty(i)) {
+          $('<input>').attr({
+            type: 'hidden',
+            name: additionalInputs[i].name,
+            value: additionalInputs[i].value
+          }).appendTo(form);
+        }
+      }
+      if (this.props.isReview) {
         $('<input>').attr({
           type: 'hidden',
-          name: additionalInputs[i].name,
-          value: additionalInputs[i].value
+          name: 'reviewAction',
+          value: reviewAction
         }).appendTo(form);
       }
+      form.appendTo(document.body);
+      form.submit();
+    } else {
+      // Something is invalid, scroll to the first error.
+      setTimeout(function() {
+        let firstErrorQ = $('.field-errors').first().closest('.question');
+        $('html, body').animate({scrollTop: $(firstErrorQ).offset().top}, 750);
+      }, 100);
+
+      $('.submit button').removeAttr('disabled');
     }
-    if (this.props.isReview) {
-      let reviewAction = $(targetForm).find('button[name=reviewAction]').val();
-      $('<input>').attr({
-        type: 'hidden',
-        name: 'reviewAction',
-        value: reviewAction
-      }).appendTo(form);
-    }
-    form.appendTo(document.body);
-    form.submit();
   },
 
   onSubmitHandler(e) {

diff --git a/census/ui_app/HelperFields.jsx b/census/ui_app/HelperFields.jsx
@@ -1,6 +1,18 @@
 import _ from 'lodash';
 import React from 'react';
 
+const QuestionErrors = props => {
+  if (props.errors && props.errors.length) {
+    let errorItems = _.map(props.errors, (err, i) => <li key={i}>{err}</li>);
+    return (<div className="field-errors">
+      <ul className="error-message">
+        {errorItems}
+      </ul>
+    </div>);
+  }
+  return null;
+};
+
 const CurrentEntry = props => {
   if (props.currentValue && props.currentValue.length) {
     let currentValue = (_.isArray(props.currentValue)) ?
@@ -53,11 +65,11 @@ const SubmitActions = props => {
           <CurrentEntry />
           <div className="answer-wrapper">
             <div className="answer">
-              <form method="post" acceptCharset="utf-8" onSubmit={props.onSubmitHandler}>
-                <button type="submit" value="publish" name="reviewAction">Publish</button>
+              <form method="post" acceptCharset="utf-8" className="entry-form" onSubmit={props.onSubmitHandler}>
+                <button type="submit" className="btn" value="publish" name="reviewAction">Publish</button>
               </form>
-              <form method="post" acceptCharset="utf-8" onSubmit={props.onSubmitHandler}>
-                <button type="submit" value="reject" name="reviewAction" className="reject">Reject</button>
+              <form method="post" acceptCharset="utf-8" className="entry-form" onSubmit={props.onSubmitHandler}>
+                <button type="submit" className="btn" value="reject" name="reviewAction" className="reject">Reject</button>
               </form>
             </div>
           </div>
@@ -80,7 +92,7 @@ const SubmitActions = props => {
           <div className="answer-wrapper">
             <div className="answer">
               <form method="post" acceptCharset="utf-8" onSubmit={props.onSubmitHandler}>
-                <button type="submit">Submit</button>
+                <button type="submit" className="btn">Submit</button>
               </form>
             </div>
           </div>
@@ -144,6 +156,7 @@ const QuestionHeader = props => {
 };
 
 export {
+  QuestionErrors,
   QuestionInstructions,
   QuestionComments,
   QuestionHeader,