From ba5c6af1aaa01be9219ff6963798be9019cfda45 Mon Sep 17 00:00:00 2001
From: ariannedee <ariannedee@gmail.com>
Date: Tue, 4 Aug 2020 22:19:40 -0700
Subject: [PATCH] Add error highlight to question box and required label to
 questions

---
 .../core/templates/partials/required.html     |  1 +
 .../core/templates/question/02_claimant.html  | 26 ++++++++-------
 .../templates/question/03_respondent.html     | 33 ++++++++++---------
 .../core/templates/question/04_marriage.html  | 29 +++++++++-------
 .../templates/question/05_separation.html     | 14 ++++++--
 5 files changed, 61 insertions(+), 42 deletions(-)
 create mode 100644 edivorce/apps/core/templates/partials/required.html

diff --git a/edivorce/apps/core/templates/partials/required.html b/edivorce/apps/core/templates/partials/required.html
new file mode 100644
index 00000000..396cb4e5
--- /dev/null
+++ b/edivorce/apps/core/templates/partials/required.html
@@ -0,0 +1 @@
+<span class="required">* Required</span>
\ No newline at end of file
diff --git a/edivorce/apps/core/templates/question/02_claimant.html b/edivorce/apps/core/templates/question/02_claimant.html
index e48d0be9..d1ab2e6d 100644
--- a/edivorce/apps/core/templates/question/02_claimant.html
+++ b/edivorce/apps/core/templates/question/02_claimant.html
@@ -10,8 +10,9 @@
 
 <h1><small>Step 2:</small>Your Information (Claimant 1)</h1>
 
-<div class="question-well">
-    <h3>Please enter your name (as it appears on your marriage certificate or registration of marriage)</h3>
+<div class="question-well {% if name_you_error %}error{% endif %}">
+    <h3>Please enter your name (as it appears on your marriage certificate or registration of marriage)
+        {% if name_you_error %}{% include 'partials/required.html' %}{% endif %}</h3>
     <span class="form-group">
         {% input_field type="text" name="name_you" class="form-block input-wide response-textbox name" %}
     </span>
@@ -40,8 +41,8 @@
     </div>
 </div>
 
-<div class="question-well">
-    <h3>Do you go by any other names?</h3>
+<div class="question-well {% if any_other_name_you_error %}error{% endif %}">
+    <h3>Do you go by any other names?{% if any_other_name_you_error %}{% include 'partials/required.html' %}{% endif %}</h3>
 
     <div class="btn-radio-group" data-toggle="buttons">
         <label class="btn btn-radio">
@@ -73,7 +74,7 @@
     </div>
 
     <div id="enter_name" hidden>
-        <h3>Please enter the name</h3>
+        <h3>Please enter the name{% if other_name_you_error %}{% include 'partials/required.html' %}{% endif %}</h3>
         <!-- This is used for adding a new other name field when add button is clicked -->
         <div id="other_names_group" hidden>
             {% include "partials/alias_field.html" with name="other_name_you" %}
@@ -109,8 +110,8 @@
     <p>This is often referred to as Family name or Surname</p>
 </div>
 
-<div class="question-well">
-    <h3>What is your date of birth?</h3>
+<div class="question-well {% if birthday_you_error %}error{% endif %}">
+    <h3>What is your date of birth?{% if birthday_you_error %}{% include 'partials/required.html' %}{% endif %}</h3>
     <p>
         <span class="input-group date date-picker-group">
             {% input_field type="text" name="birthday_you" class="date-picker form-control" id="birth_date" placeholder="MMM D, YYYY" %}
@@ -121,17 +122,18 @@
     </p>
 </div>
 
-<div class="question-well">
-    <h3>What is your occupation?</h3>
+<div class="question-well {% if occupation_you_error %}error{% endif %}">
+    <h3>What is your occupation?{% if occupation_you_error %}{% include 'partials/required.html' %}{% endif %}</h3>
     <div>{% input_field type="text" name="occupation_you" class="form-block input-wide response-textbox" %}</div>
-    <p>This refers to the type of work you do. For example,  janitor, banker, student, nurse etc.</p>
+    <p>This refers to the type of work you do. For example, janitor, banker, student, nurse etc.</p>
 </div>
 
-<div class="question-well">
-    <h3>How long have you lived in B.C.?</h3>
+<div class="question-well {% if lived_in_bc_you_error or moved_to_bc_date_you_error %}error{% endif %}">
+    <h3>How long have you lived in B.C.?{% if lived_in_bc_you_error %}{% include 'partials/required.html' %}{% endif %}</h3>
     <p>Please select one</p>
     <div class="radio"><label>{% input_field type="radio" class="radio-with-other" name="lived_in_bc_you" value="Since birth" %}Since birth</label></div>
     <div class="radio"><label>{% input_field type="radio" class="radio-with-other radio_with_textbox" name="lived_in_bc_you" value="Moved to B.C. on" %}Moved to B.C. on
+        {% if moved_to_bc_date_you_error %}{% include 'partials/required.html' %}{% endif %}
         <span class="input-group date date-picker-group">
             {% input_field type="text" name="moved_to_bc_date_you" id="moved_date" class="date-picker other-textbox input-inline form-control" tabindex="-1" placeholder="MMM D, YYYY" %}
             <span class="input-group-addon" >
diff --git a/edivorce/apps/core/templates/question/03_respondent.html b/edivorce/apps/core/templates/question/03_respondent.html
index dceedd3c..5bff2c23 100644
--- a/edivorce/apps/core/templates/question/03_respondent.html
+++ b/edivorce/apps/core/templates/question/03_respondent.html
@@ -13,8 +13,9 @@
 
 <h2>Your Spouse's Information</h2>
 
-<div class="question-well">
-    <h3>What is your spouse's name ( enter name as it appears on the marriage certificate or registration of marriage)?</h3>
+<div class="question-well {% if name_spouse_error %}error{% endif %}">
+    <h3>What is your spouse's name ( enter name as it appears on the marriage certificate or registration of marriage)?
+        {% if name_spouse_error %}{% include 'partials/required.html' %}{% endif %}</h3>
     <span class="form-group">
         {% input_field type="text" name="name_spouse" class="form-block input-wide response-textbox name" %}
     </span>
@@ -46,8 +47,8 @@
     </div>
 </div>
 
-<div class="question-well">
-    <h3>Does your spouse go by any other names?</h3>
+<div class="question-well {% if any_other_name_spouse_error %}error{% endif %}">
+    <h3>Does your spouse go by any other names?{% if any_other_name_spouse_error %}{% include 'partials/required.html' %}{% endif %}</h3>
 
     <div class="btn-radio-group" data-toggle="buttons">
         <label class="btn btn-radio">
@@ -84,7 +85,7 @@
     </div>
 
     <div id="enter_name" hidden>
-        <h3>Please enter the name</h3>
+        <h3>Please enter the name{% if other_name_spouse_error %}{% include 'partials/required.html' %}{% endif %}</h3>
         <!-- This is used for adding a new other name field when add button is clicked -->
         <div id="other_names_group" hidden>
             {% include "partials/alias_field.html" with name="other_name_spouse" value=' ' delete_button="true" %}
@@ -121,8 +122,8 @@
     <p>This is often referred to as Family name or Surname</p>
 </div>
 
-<div class="question-well">
-    <h3>What is your spouse's date of birth?</h3>
+<div class="question-well {% if birthday_spouse_error %}error{% endif %}">
+    <h3>What is your spouse's date of birth?{% if birthday_spouse_error %}{% include 'partials/required.html' %}{% endif %}</h3>
     <p>
         <span class="input-group date date-picker-group">
             {% input_field type="text" name="birthday_spouse" class="date-picker form-control" id="birth_date" placeholder="MMM D, YYYY" %}
@@ -133,23 +134,25 @@
     </p>
 </div>
 
-<div class="question-well">
-    <h3>What is your spouse's occupation?</h3>
+<div class="question-well {% if occupation_spouse_error %}error{% endif %}">
+    <h3>What is your spouse's occupation?{% if occupation_spouse_error %}{% include 'partials/required.html' %}{% endif %}</h3>
     <div>{% input_field type="text" name="occupation_spouse" class="form-block input-wide response-textbox" %}</div>
-    <p>This refers to the type of work you do. For example,  janitor, banker, student, nurse etc.</p>
+    <p>This refers to the type of work you do. For example, janitor, banker, student, nurse etc.</p>
 </div>
 
-<div class="question-well">
-    <h3>How long has your spouse lived in B.C.?</h3>
+<div class="question-well {% if lived_in_bc_spouse_error or moved_to_bc_date_spouse_error %}error{% endif %}">
+    <h3>How long has your spouse lived in B.C.?{% if lived_in_bc_spouse_error %}{% include 'partials/required.html' %}{% endif %}</h3>
     <p>Please select one</p>
     <div class="radio"><label>{% input_field type="radio" class="radio-with-other" name="lived_in_bc_spouse" value="Since birth" %}Since birth</label></div>
-    <div class="radio"><label>{% input_field type="radio" class="radio-with-other radio_with_textbox" name="lived_in_bc_spouse" value="Moved to B.C. on" %}Moved to B.C. on
+    <div class="radio"><label>{% input_field type="radio" class="radio-with-other radio_with_textbox" name="lived_in_bc_spouse" value="Moved to B.C. on" %}Moved to B.C. on{% if moved_to_bc_date_spouse_error %}
+        {% include 'partials/required.html' %}{% endif %}
         <span class="input-group date date-picker-group">
-            {% input_field type="text" name="moved_to_bc_date_spouse" id="moved_date" class="date-picker other-textbox input-inline form-control" tabindex="-1" placeholder="MMM D, YYYY" %}
+            {% input_field type="text" name="moved_to_bc_date_spouse" id="moved_date" class="date-picker other-textbox input-inline form-control" tabindex="-1" placeholder="MMM D, YYYY" required="lived_in_bc_spouse=Moved to B.C. on"%}
             <span class="input-group-addon" >
                 <i class="fa fa-calendar circle"></i>
             </span>
-        </span></label></div>
+        </span>
+    </label></div>
     <div class="radio"><label>{% input_field type="radio" class="radio-with-other" name="lived_in_bc_spouse" value="Does not live in B.C." %}Does not live in B.C.</label></div>
 
     <p>In order to apply for a divorce in B.C., you or your spouse must have been a regular resident in B.C (the legal term is ordinarily resident
diff --git a/edivorce/apps/core/templates/question/04_marriage.html b/edivorce/apps/core/templates/question/04_marriage.html
index 6754a23c..f9e9f73d 100644
--- a/edivorce/apps/core/templates/question/04_marriage.html
+++ b/edivorce/apps/core/templates/question/04_marriage.html
@@ -30,8 +30,8 @@
     your divorce request being returned for correction.</p>
 
 {% if married_marriage_like == 'Legally married' %}
-<div id="when_married" class="question-well">
-    <h3>When were you married?</h3>
+<div id="when_married" class="question-well {% if when_were_you_married_error %}error{% endif %}">
+    <h3>When were you married?{% if when_were_you_married_error %}{% include 'partials/required.html' %}{% endif %}</h3>
     <p>
         <span class="input-group date date-picker-group">
             {% input_field type="text" name="when_were_you_married" class="date-picker form-control" id="marriage_date" placeholder="MMM D, YYYY" %}
@@ -43,8 +43,9 @@
 </div>
 {% endif %}
 
-<div id="lived_together" class="question-well">
-    <h3>When did you and {% if name_spouse %} {{ name_spouse }} {% else %} your spouse {% endif %} begin to live together in a marriage-like relationship?</h3>
+<div id="lived_together" class="question-well {% if when_were_you_live_married_like_error %}error{% endif %}">
+    <h3>When did you and {% if name_spouse %} {{ name_spouse }} {% else %} your spouse {% endif %} begin to live together in a marriage-like relationship?
+        {% if when_were_you_live_married_like_error %}{% include 'partials/required.html' %}{% endif %}</h3>
     <p>
         <span class="input-group date date-picker-group">
             {% input_field type="text" name="when_were_you_live_married_like" class="date-picker form-control" id="lived_start_date" placeholder="MMM D, YYYY" %}
@@ -88,14 +89,14 @@
 
 
 {% if married_marriage_like == 'Legally married' %}
-<div class="question-well">
+<div class="question-well {% if where_were_you_married_city_error or where_were_you_married_country_error or where_were_you_married_other_country_error %}error{% endif %}">
     <h3>Where were you married?</h3>
     <p>Enter the location as it appears on the marriage certificate (e.g. city, province or state and country)</p>
-    <p>City</p>
+    <p>City{% if where_were_you_married_city_error %}{% include 'partials/required.html' %}{% endif %}</p>
     {% input_field type="text" name="where_were_you_married_city" class="form-block input-wide response-textbox" %}
     <p>Prov/State (optional)</p>
     {% input_field type="text" name="where_were_you_married_prov" class="form-block input-narrow response-textbox" %}
-    <p>Country</p>
+    <p>Country{% if where_were_you_married_country_error or where_were_you_married_other_country_error %}{% include 'partials/required.html' %}{% endif %}</p>
 
     <div class="radio"><label>{% input_field type="radio" class="radio-with-other" name="where_were_you_married_country" value="Canada" %}Canada</label></div>
     <div class="radio"><label>{% input_field type="radio" class="radio-with-other" name="where_were_you_married_country" value="USA" %}USA</label></div>
@@ -103,15 +104,19 @@
 </div>
 {% endif %}
 
-<div class="question-well">
-    <h3>Before you got married to {% if name_spouse %} {{ name_spouse }} {% else %} your spouse {% endif %}, what was your marital status?</h3>
+<div class="question-well {% if marital_status_before_you_error %}error{% endif %}">
+    <h3>Before you got married to {% if name_spouse %} {{ name_spouse }} {% else %} your spouse {% endif %}, what was your marital status?
+        {% if marital_status_before_you_error %}{% include 'partials/required.html' %}{% endif %}
+    </h3>
     <div class="radio"><label>{% input_field type="radio" name="marital_status_before_you" value="Never married" %}Never married</label></div>
     <div class="radio"><label>{% input_field type="radio" name="marital_status_before_you" value="Divorced" %}Divorced</label></div>
     <div class="radio"><label>{% input_field type="radio" name="marital_status_before_you" value="Widowed" %}Widowed</label></div>
 </div>
 
-<div class="question-well">
-    <h3>What was the marital status of {% if name_spouse %} {{ name_spouse }} {% else %} your spouse {% endif %} before your marriage?</h3>
+<div class="question-well {% if marital_status_before_spouse_error %}error{% endif %}">
+    <h3>What was the marital status of {% if name_spouse %} {{ name_spouse }} {% else %} your spouse {% endif %} before your marriage?
+        {% if marital_status_before_spouse_error %}{% include 'partials/required.html' %}{% endif %}
+    </h3>
     <div class="radio"><label>{% input_field type="radio" name="marital_status_before_spouse" value="Never married" %}Never married</label></div>
     <div class="radio"><label>{% input_field type="radio" name="marital_status_before_spouse" value="Divorced" %}Divorced</label></div>
     <div class="radio"><label>{% input_field type="radio" name="marital_status_before_spouse" value="Widowed" %}Widowed</label></div>
@@ -123,7 +128,7 @@
         <div class="modal-content">
             <div class="modal-header">
                 <i class="fa fa-link" aria-hidden="true"></i>
-                <h1 class="modal-title">Your  Marriage</h1>
+                <h1 class="modal-title">Your Marriage</h1>
             </div>
             <div class="modal-body">
                 <p>Now we’d like to learn about the details of your marriage history. Make sure you have a copy of your marriage certificate. You will need this to provide us with the exact date of your marriage.</p>
diff --git a/edivorce/apps/core/templates/question/05_separation.html b/edivorce/apps/core/templates/question/05_separation.html
index dab7c39a..0389dbc7 100644
--- a/edivorce/apps/core/templates/question/05_separation.html
+++ b/edivorce/apps/core/templates/question/05_separation.html
@@ -10,12 +10,16 @@
 
 
 <h1><small>Step 5:</small>Your Separation</h1>
-<div class="question-well">
-    <h3>There is no possibility my spouse and I will get back together (reconciliation).</h3>
+<div class="question-well {% if no_reconciliation_possible_error %}error{% endif %}">
+    <h3>There is no possibility my spouse and I will get back together (reconciliation).
+        {% if no_reconciliation_possible_error %}{% include 'partials/required.html' %}{% endif %}
+    </h3>
     <p>
         For this question, we need to confirm that there is no chance you and your spouse will be getting back together.
         By selecting "I agree" this shows the court that you and your spouse have thoroughly thought out your request for divorce.
     </p>
+    {% if no_reconciliation_possible_error %}<div class="warning"><p>* In order to process your application, you must agree to this condition. If you can not agree,
+        please consult a lawyer.</p></div>{% endif %}
     <div class="checkbox-group">
         <div class="checkbox">
             <label>
@@ -25,7 +29,7 @@
     </div>
 </div>
 
-<div class="question-well">
+<div class="question-well {% if no_collusion_error %}error{% endif %}">
     <p>
         We are legally required to ask whether or not you and {% if name_spouse %} {{ name_spouse }} {% else %} your spouse {% endif %}
          have agreed to deceive the court. This is called “<span class="tooltip-link" data-toggle="tooltip" data-placement="right" data-html="true"
@@ -33,7 +37,11 @@
            in any way (for example, saying that you’ve been separated for longer than you have been). It is a legal requirement that you confirm you
            are providing accurate and complete information.">collusion<i class="fa fa-question-circle" aria-hidden="true"></i></span>
         ”. An example of collusion is when a couple agrees to lie about the date of separation to speed up the divorce process.
+        {% if no_collusion_error %}{% include 'partials/required.html' %}{% endif %}
     </p>
+    {% if no_collusion_error %}
+        <div class="warning"><p>* In order to process your application, you must agree to this condition. If you can not agree,
+            please consult a lawyer.</p></div>{% endif %}
     <div class="checkbox-group">
         <div class="checkbox">
             <label>