Use HTML5 field validation in join form

diff --git a/app/join.mlt b/app/join.mlt
index b12ae42..7897292 100644 (file)
--- a/app/join.mlt
+++ b/app/join.mlt
@@ -56,31 +56,32 @@ else
 
 <form action="join" method="post">
 <input type="hidden" name="cmd" value="app">
+
 <table class="blanks">
-<tr> <td width="25%">Desired username:</td> <td width="75%"><input name="name"><br>
+<tr> <td width="25%">Desired username:</td> <td width="75%"><input name="name" max="12" min="1" type="text" required="required"><br>
        Please follow usual UNIX conventions, including limiting yourself to lowercase letters and at most 12 characters. It's helpful to pick a name you wouldn't mind using to identify yourself to both strangers and friends. Something based on your "real" name is a safe bet.<br>
        You don't need to worry about whether or not the username you want is already taken. This application system will let you know if that is the case. You can probably use a shorter and simpler name than you are accustomed to getting at larger services, so we encourage you to try such names first.</td> </tr>
 <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr>
 <% if minor then %>
-<tr> <td>New member's "real" name:</td> <td><input name="rname" size="50"></td> </tr>
-<tr> <td>Legal guardian's name:</td> <td><input name="gname"><br> Please enter your full name, as you would on a normal, legally binding contract.</td></tr>
+<tr> <td>New member's "real" name:</td> <td><input name="rname" size="50" required="required"></td> </tr>
+<tr> <td>Legal guardian's name:</td> <td><input name="gname" required="required"><br> Please enter your full name, as you would on a normal, legally binding contract.</td></tr>
 <% else %>
-<tr> <td>Your "real" name:</td> <td><input name="rname"><br> Please enter your full name, as you would on a normal, legally binding contract.</td></tr>
+<tr> <td>Your "real" name:</td> <td><input name="rname" required="required"><br> Please enter your full name, as you would on a normal, legally binding contract.</td></tr>
 <% end %>
 <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr>
-<tr> <td>Contact e-mail address</td> <td><input name="email"
-       size="50"> <span style="color:red">If you are using GMail
+<tr> <td>Contact e-mail address</td> <td><input name="email" required="required"
+       size="50" type="email"> <span style="color:red">If you are using GMail
        whitelist <tt>join@hcoop.net</tt> to ensure receipt of the
        confirmation message.</span></td> </tr>
 <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr>
-<tr> <td><a href="http://www.paypal.com/">PayPal</a> account e-mail:</td> <td><input name="paypal" size="50"></td> </tr>
+<tr> <td><a href="http://www.paypal.com/">PayPal</a> account e-mail:</td> <td><input name="paypal" size="50">
      These payment service provider e-mail addresses are optional.  You will probably end up using one or the other of these providers if your application is approved, and entering here the e-mail address that you've used to sign up with that provider will help us process your payment accurately and promptly. E-mail addresses you enter here should match those seen by recipients of payments that you send.</td> </tr>
 <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr>
 <tr> <td><input type="checkbox" name="forward"></td> <td>Check this box if you would like to use HCoop as your primary e-mail provider.<br>
        If you don't select this option and you are approved to join, e-mail to your HCoop account will be forwarded to the contact address you provided above (without preserving a local copy on HCoop servers).<br>
        You can change this option later, but we'll probably have helpful things to e-mail you as soon as you join.  It's important that we be able to reach members reliably, so please don't decide to use us as your primary e-mail provider unless you can commit to checking your HCoop mailbox just as often as any other personal accounts you have.</td> </tr>
 <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr>
-<tr> <td>How do you plan to use a HCoop membership?</td> <td><textarea name="uses" rows="5" cols="80" wrap="soft"></textarea></td> </tr>
+<tr> <td>How do you plan to use a HCoop membership?</td> <td><textarea name="uses" rows="5" cols="80" wrap="soft" required="required"></textarea></td> </tr>
 <tr> <td>Any other information about yourself</td> <td><textarea name="other" rows="5" cols="80" wrap="soft"></textarea></td> </tr>
 </table>
 
@@ -94,7 +95,7 @@ You must agree to the following terms to be considered for membership:
 
 <br><hr><br>
 
-<input type="checkbox" name="agree">
+<input type="checkbox" name="agree" required="required">
 <% if minor then App.readTosMinorAgree () else App.readTosAgree () end %>
 
 <br><br><input type="submit" value="Apply">