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
$("#image").click(function(){
$("#cardnum").show();
});
$("#image").click(function(){
$("#cardnum").show();
});
+ $( "#upload_form" ).validate({
+ rules: {
+ cardnumber: {
+ required: {
+ depends: function(element) {
+ return $("#image").is(":checked");
+ }
+ }
+ }
+ }
+ });
[% END %]
</div>
[% END %]
[% 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>
- <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>
- <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>
</fieldset>
<fieldset class="action">
<input type="hidden" name="op" value="Upload" />
</fieldset>
<fieldset class="action">
<input type="hidden" name="op" value="Upload" />