timprove form, rely on HTML5 validation in addition to php validation - cosmo - front and backend for Markov-Chain Monte Carlo inversion of cosmogenic nuclide concentrations
(HTM) git clone git://src.adamsgaard.dk/cosmo
(DIR) Log
(DIR) Files
(DIR) Refs
(DIR) README
(DIR) LICENSE
---
(DIR) commit 20042ee0ed9749460070b44a678a2f6bb45352ff
(DIR) parent b450da8284747b6f317997e7f63ac5551b6e7dd4
(HTM) Author: Anders Damsgaard <anders.damsgaard@geo.au.dk>
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(-)
---
(DIR) 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" required
+ 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></label>
</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="text"
class="validate" placeholder="2650" required>
- <label for="rock_density" class="active">Density</label>
+ <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></label>
</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></label>
</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]</label>
+ <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></label>
</div>
<div class="input-field col s6">
<input id="d18O_threshold_max" name="d18O_threshold_max"
type="text" class="validate" required>
<label for="d18O_threshold_max">Max.
δ<sup>18</sup>O
- threshold [‰]</label>
+ threshold [‰] <small>Required</small></label>
</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">