Bug 15828: Upload patron images is hard to read

The styling of the patron image upload form causes the text to be
smaller than it should be for the main body of a page. This patch
revises the form style and cleans up the markup a bit.

This patch also adds client-side validation of the form so that a file
upload is required, and a card number is required if an image file is
selected.

To test, apply the patch and go to Tools -> Upload patron images.

1. Confirm that the text in the form is the correct size.
2. With "Zip file" selected, confirm that submitting the form is blocked
   and the file upload marked as required.
3. With "Image file" selected, confirm that submitting the form
   with an empty card number field is blocked and the card number
   field is marked as required.
4. Confirm that uploading zip files and single images still works
   correctly.

Signed-off-by: Hector Castro <hector.hecaxmmx@gmail.com>
Works as advertised

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Brendan Gallagher brendan@bywatersolutions.com

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/picture-upload.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/picture-upload.tt
index ef22fe1..1ee7e67 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/picture-upload.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/picture-upload.tt
@@ -9,6 +9,17 @@
        $("#image").click(function(){
                $("#cardnum").show();
        });
+    $( "#upload_form" ).validate({
+        rules: {
+            cardnumber: {
+                required: {
+                    depends: function(element) {
+                        return $("#image").is(":checked");
+                    }
+                }
+            }
+        }
+    });
 });
 </script>
 </head>
@@ -104,23 +115,31 @@
                     [% END %]
                 </div>
                 [% END %]
-               <form method="post" action="/cgi-bin/koha/tools/picture-upload.pl" enctype="multipart/form-data">
-                   <fieldset class="brief">
-                        <div class="hint"><b>NOTE:</b> Only PNG, GIF, JPEG, XPM formats are supported.</div>
+            <form method="post" action="/cgi-bin/koha/tools/picture-upload.pl" enctype="multipart/form-data" id="upload_form">
+                <fieldset class="rows">
+                    <p><b>NOTE:</b> Only PNG, GIF, JPEG, XPM formats are supported.</p>
                         <ol class="radio">
-                            <li class="radio">
-                                <label for="zipfile"><input type="radio" id="zipfile" name="filetype" value="zip" checked="checked" /> zip file</label></li>
-                                <li>
-                                <label for="image">
-                                                               [% IF ( filetype == 'image' ) %]<input type="radio" id="image" name="filetype" value="image" checked="checked" />[% ELSE %]<input type="radio" id="image" name="filetype" value="image" />[% END %]
-                                                                image file</label>
-                       <ol>
                             <li>
-                                <label for="uploadfile">Select the file to upload: </label><input type="file" id="uploadfile" name="uploadfile" />
-                                [% IF ( filetype == 'image' ) %]<span id="cardnum">[% ELSE %]<span id="cardnum" style="display: none">[% END %]<label for="cardnumber">Enter patron cardnumber: </label><input type="text" id="cardnumber" name="cardnumber" value="[% cardnumber %]" size="15" /></span>
+                                <label for="zipfile"><input type="radio" id="zipfile" name="filetype" value="zip" checked="checked" /> Zip file</label></li>
+                            <li>
+                                <label for="image">
+                                [% IF ( filetype == 'image' ) %]<input type="radio" id="image" name="filetype" value="image" checked="checked" />[% ELSE %]<input type="radio" id="image" name="filetype" value="image" />[% END %] Image file</label>
+                            </li>
+                            [% IF ( filetype == 'image' ) %]
+                                <li id="cardnum">
+                            [% ELSE %]
+                                <li id="cardnum" style="display: none">
+                            [% END %]
+                                <label for="cardnumber" class="required">Enter patron cardnumber: </label>
+                                <input type="text" id="cardnumber" name="cardnumber" value="[% cardnumber %]" size="15" />
+                                <span class="required">Required</span>
+                            </li>
+                            <li class="required">
+                                <label for="uploadfile">Select the file to upload: </label>
+                                <input type="file" id="uploadfile" name="uploadfile" class="required" required="required" />
+                                <span class="required">Required</span>
                             </li>
-                       </ol>
-                                       </li></ol>
+                        </ol>
                    </fieldset>
                     <fieldset class="action">
                         <input type="hidden" name="op" value="Upload" />