website Changeset - 9bfb5e10dec2 · Conservancy Kallithea

Changeset - 9bfb5e10dec2

Parent rev.

Child rev.

[Not reviewed]

0 2 1

Bradley Kuhn (bkuhn) - 9 years ago 2014-12-02 16:31:43
bkuhn@ebb.org

Rework form with error messages & basic validation

Since PayPal cannot seem to be cajoled into verifying a minimum amount,
we have to do it here with Javascript. This isn't perfect validation:
the form can currently still be submitted with an amount less than $120,
but at least this way Javascript-enabled browsers might prevent some
folks from doing that.

3 files changed with 61 insertions and 7 deletions:

www/conservancy/static/forms.css

www/conservancy/static/supporter-page.js

www/conservancy/static/supporter/index.html

0 comments (0 inline, 0 general)

www/conservancy/static/forms.css

➞

Show inline comments

 new file 100644
 #supporter-form label {
     display: inline-block;
     width: 200px;
     text-align: right;
+}
 #supporter-form-submit {
     padding-left: 100px;
+}
 #supporter-form div {
     margin-top: 1em;
+}
 .form-error {
     display: none;
     margin-left: 10px;
     color: green;
+}
 .form-error-show {
     color: red;
     margin-left: 10px;
+}
 input.invalid, textarea.invalid {
     border: 2px solid red;
+}
 input.valid, textarea.valid {
     border: 2px solid green;
+}

www/conservancy/static/supporter-page.js

➞

Show inline comments

@@ ... / @@ -34,2 +34,19 @@ $(document).ready(function() { @@
     });
     $('#amount').on('input', function() {
         var input=$(this);
         var value = input.val();
         var errorElement=$("span", input.parent());
         var re = /^[0-9\.]+$/;
         var isValid = (re.test(value) && parseInt(value) >= 120);
         if (isValid)  {
            input.removeClass("invalid").addClass("valid");
            errorElement.removeClass("form-error-show").addClass("form-error");
+        }
         else {
             input.removeClass("valid").addClass("invalid");
             errorElement.removeClass("form-error").addClass("form-error-show");
+        }
   });
   });

www/conservancy/static/supporter/index.html

➞

Show inline comments

@@ ... / @@ -6,2 +6,3 @@ @@
 <link href="/jquery-ui.css" rel="stylesheet" type="text/css"/>
 <link href="/forms.css" rel="stylesheet" type="text/css"/>
 <script type="text/javascript" src="/jquery.min.js"></script>
@@ ... @@
             <input type="hidden" name="business" value="supporter@sfconservancy.org" />
             <input type="hidden" id="min_amount" type="text" name="min_amount" value="120" />
             <input type="hidden" name="item_name" value="Conservancy Supporter, Annual" />
                       <h5>Amount:</h5>$<input id="amount" type="text" name="amount" size="7" value="120" /><br/>
                       <small>($120 minimum; increase the amount if you'd like to help us more.)</small>
 <div>
   <label for="amount"><strong>Amount:</strong> $</label>
   <input id="amount" type="text" name="amount" size="7" value="120" />
   <span class="form-error"><small>$120 minimum to become a Conservancy Supporter.  Visit <a href="/donate">our regular donate page</a> if you'd like
   to donate less than $120.</small></span><br/>
-                                            <h5>Do you want to receive a t-shirt?</h5>
+                      <label for="wantGift"><strong>Do you want to receive a t-shirt? </strong></label>
                       <input type="hidden" name="on1" value="wantGift" />
@@ ... @@
                       <br />
-                      <h5>T-shirt size:</h5>
+                      <label for="wantGift"><strong>T-shirt size: </strong></label>
                       <input type="hidden" name="on3" value="size"/>
@@ ... @@
                       </select><br/>
                       <h5>Would you like to be acknowledged publicly as a Conservancy Supporter?</h5>
                       <label for="publicAck"><strong>
                           Should we list you publicly as a Conservancy Supporter? </strong></label>
                       <input type="hidden" name="on2" value="publicAck" />
@@ ... @@
                                             <h5>Join Conservancy's Low-Traffic Announcement Email List?</h5>
                       <label for="joinList"><strong>Join Conservancy's
                       Low-Traffic Announcement Email List? </strong></label>
                       <input type="hidden" name="on4" value="joinList" />

0 comments (0 inline, 0 general)