EG:

http://test.foo/form.php#p6

As it stands currently, this code works best as an independent app. Need to make the code more portable so it can be dragged/dropped into other projects (e.g., a component of an app).

Return key will submit form if a field is focused. Would like to stop this from happening.

Something like:

$('#formid').on('keyup keypress', function(e) {
  var keyCode = e.keyCode || e.which;
  if (keyCode === 13) { 
    e.preventDefault();
    return false;
  }
});

Related: #3

Option to add history to URL for page-by-page navigation/linking.

Add ability to remember selections.

So percentage does not get cut off:

#progress div { min-width: 3em !important; }

For the skip the skip logic. The JS doesn't currently look at pre-filled (checked) fields and update the skip logic accordingly.

For testing, this would be very useful.

issue with the weight required field being blank and NOT causing the page to stop until it is

however, it IS recognized because an error message pops up when it is blank

<section id="p6" class="step">
    <h3>Your height and weight</h3>
    <p class="wave">What is your height?</p>
    <div class="pure-control-group">
        <label>
            <input type="number" id="p6-1" name="" min="1" max="12" required> feet,
        </label>
        <label>
            <input type="number" id="p6-2" name="" min="0"> inch(es)
        </label>
    </div>
    <p class="wave">What is your weight (in pounds)?</p>
    <div class="pure-control-group">
        <label>
            <input type="number" id="p6-3" name="" min="1" max="500" required> pounds
        </label>
</section>

Need to figure out best way to generically handle the final form submission.

In CSS. Have a skin, but also have base structure.

Basically, change things so that Pure is totally optional. I want this code to work on any form HTML, independent of the css framework used.

Use JS to add the <span>*</span> html.