timprove form, rely on HTML5 validation in addition to php validation - cosmo -… | |
git clone git://src.adamsgaard.dk/cosmo | |
Log | |
Files | |
Refs | |
README | |
LICENSE | |
--- | |
commit 20042ee0ed9749460070b44a678a2f6bb45352ff | |
parent b450da8284747b6f317997e7f63ac5551b6e7dd4 | |
Author: Anders Damsgaard <[email protected]> | |
Date: Tue, 18 Aug 2015 12:06:23 +0200 | |
improve form, rely on HTML5 validation in addition to php validation | |
Diffstat: | |
M pages/history.html | 85 ++++++++++++++++++++++-------… | |
1 file changed, 61 insertions(+), 24 deletions(-) | |
--- | |
diff --git a/pages/history.html b/pages/history.html | |
t@@ -8,44 +8,54 @@ | |
<div class="row"> | |
<!-- method: GET or POST --> | |
- <form class="col s12" action="uploadhistory.php" method="POST"> | |
+ <form class="col s12" name="historyForm" | |
+ action="uploadhistory.php" method="POST"> | |
+ <!--ng-submit="submitForm(userForm.$valid)" novalidate--> | |
+ <!--onsubmit="return validateForm()" method="POST">--> | |
<div class="row"> | |
<b>General information</b><br> | |
- <div class="input-field col s6"> | |
+ <div class="input-field col s6 form group"> | |
<input placeholder="" id="sample_id" name="sample_id" | |
type="text" class="validate" required> | |
- <label for="sample_id">Sample ID</label> | |
+ <label for="sample_id">Sample ID | |
+ <small>Required</small></label> | |
</div> | |
<div class="input-field col s6"> | |
<input id="your_name" name="your_name" type="text" | |
- class="validate" required> | |
- <label for="yourast_name">Your Name</label> | |
+ class="validate" aria-describedby="name-format" requir… | |
+ aria-required="true"> | |
+ <label for="your_name">Your Name | |
+ <small>Required</small></label> | |
</div> | |
</div> | |
<div class="row"> | |
<div class="input-field col s12"> | |
<input id="email" name="email" type="email" | |
class="validate" required> | |
- <label for="email">Email</label> | |
+ <label for="email">Email <small>Required</small></labe… | |
</div> | |
</div> | |
<div class="row"> | |
<div class="input-field col s6"> | |
- <input id="lat" name="lat" type="text" class="validate… | |
- <label for="lat">Latitude </label> | |
+ <input id="lat" name="lat" type="text" | |
+ class="validate" required> | |
+ <label for="lat">Latitude | |
+ <small>Required</small></label> | |
</div> | |
<div class="input-field col s6"> | |
<input id="long" name="long" type="text" | |
- class="validate"> | |
- <label for="long">Longitude</label> | |
+ class="validate" required> | |
+ <label for="long">Longitude | |
+ <small>Required</small></label> | |
</div> | |
</div> | |
<div class="row"> | |
<b>Concentrations of terrestrial cosmogenic nuclides (TCNs) | |
- [?]</b> <br>Fill in at least one field, | |
- leave unknown values blank<br> | |
+ [?]</b> <br> | |
+ Fill in <b>at least one</b> field, leave unknown values | |
+ blank.<br> | |
<div class="input-field col s3"> | |
<input id="conc_10Be" name="conc_10Be" type="text" | |
class="validate"> | |
t@@ -70,6 +80,8 @@ | |
<div class="row"> | |
<b>TCN concentration uncertainty [%]</b><br> | |
+ For each TCN concentration inserted above, specify the | |
+ production rate below.<br> | |
<div class="input-field col s3"> | |
<input id="uncer_10Be" name="uncer_10Be" type="text" | |
class="validate" placeholder="5"> | |
t@@ -98,9 +110,12 @@ | |
<div class="row"> | |
<b>TCN production rates [atoms/kg/a] | |
- </b> <br> Values can be estimated | |
- using <a href="http://hess.ess.washington.edu" | |
- target="_blank">CRONUS-Earth</a> <br> | |
+ </b> <br> | |
+ For each TCN concentration inserted above, specify the | |
+ production rate below. | |
+ Values can be estimated using <a | |
+ href="http://hess.ess.washington.edu" | |
+ target="_blank">CRONUS-Earth</a>.<br> | |
<div class="input-field col s3"> | |
<input id="prod_10Be" name="prod_10Be" type="text" | |
class="validate"> | |
t@@ -128,7 +143,8 @@ | |
<div class="input-field col s12"> | |
<input id="rock_density" name="rock_density" type="tex… | |
class="validate" placeholder="2650" required> | |
- <label for="rock_density" class="active">Density</labe… | |
+ <label for="rock_density" class="active">Density | |
+ <small>Required</small></label> | |
</div> | |
</div> | |
t@@ -138,13 +154,13 @@ | |
<input id="epsilon_gla_min" name="epsilon_gla_min" | |
type="text" class="validate" required> | |
<label for="epsilon_gla_min">Min. glacial erosion rate | |
- [mm a<sup>-1</sup>]</label> | |
+ [mm a<sup>-1</sup>] <small>Required</small></label> | |
</div> | |
<div class="input-field col s6"> | |
<input id="epsilon_gla_max" name="epsilon_gla_max" | |
type="text" class="validate" required> | |
<label for="epsilon_gla_max">Max. glacial erosion rate | |
- [mm a<sup>-1</sup>]</label> | |
+ [mm a<sup>-1</sup>] <small>Required</small></label> | |
</div> | |
</div> | |
<div class="row"> | |
t@@ -152,13 +168,13 @@ | |
<input id="epsilon_int_min" name="epsilon_int_min" | |
type="text" class="validate" required> | |
<label for="epsilon_int_min">Min. inter-glacial erosion | |
- rate [mm a<sup>-1</sup>]</label> | |
+ rate [mm a<sup>-1</sup>] <small>Required</small></… | |
</div> | |
<div class="input-field col s6"> | |
<input id="epsilon_int_max" name="epsilon_int_max" | |
type="text" class="validate" required> | |
<label for="epsilon_int_max">Max. inter-glacial erosion | |
- rate [mm a<sup>-1</sup>]</label> | |
+ rate [mm a<sup>-1</sup>] <small>Required</small></… | |
</div> | |
</div> | |
t@@ -167,7 +183,8 @@ | |
<div class="input-field col s12"> | |
<input id="t_degla" name="t_degla" type="text" | |
class="validate" required> | |
- <label for="t_degla">Time since deglaciation [a]</labe… | |
+ <label for="t_degla">Time since deglaciation [a] | |
+ <small>Required</small></label> | |
</div> | |
</div> | |
t@@ -177,19 +194,19 @@ | |
type="text" class="validate" required> | |
<label for="d18O_threshold_min">Min. | |
δ<sup>18</sup>O | |
- threshold [‰]</label> | |
+ threshold [‰] <small>Required</small></labe… | |
</div> | |
<div class="input-field col s6"> | |
<input id="d18O_threshold_max" name="d18O_threshold_ma… | |
type="text" class="validate" required> | |
<label for="d18O_threshold_max">Max. | |
δ<sup>18</sup>O | |
- threshold [‰]</label> | |
+ threshold [‰] <small>Required</small></labe… | |
</div> | |
</div> | |
<div class="row"> | |
- <b>Select climate record</b> | |
+ <b>Select climate record</b> <small>Required</small> | |
<p> | |
<input name="d18O_smoothing" type="radio" id="rec_5kyr" | |
value="rec_5kyr"> | |
t@@ -251,6 +268,26 @@ | |
</div> | |
+ <script type="text/javascript"> | |
+ function nonBlankField(field, name) { | |
+ var x = document.forms["historyForm"][field].value; | |
+ if (x == null || x == "") { | |
+ alert(name + " must be filled out"); | |
+ return false; | |
+ } | |
+ } | |
+ function validateForm() { | |
+ if (nonBlankField("sample_id", "Sample ID") || | |
+ nonBlankField("your_name", "Your Name") || | |
+ nonBlankField("email", "Email") || | |
+ nonBlankField("lat", "Latitude") || | |
+ nonBlankField("long", "Longitude")) { | |
+ return false; | |
+ } | |
+ | |
+ } | |
+ </script> | |
+ | |
</div> | |
<div class="fixed-action-btn" style="top: 26px; right: 12px;"> | |
<a href="#/" class="btn-floating btn-large red"> |