Restore form validation using AJAX. Apply custom pattern matching on input type 'number'.

[gb0101010101]

This has taken a while to figure out, and will need extensive testing, with possible further commits, to make sure it applies consistently. Please do not commit this PR before discussing. I think it works but cannot be sure it will for all mobile devices.

Existing form validation not working using AJAX

The current code uses AJAX to submit many forms and bypasses basic HTML5 form validation which executes when form is submitted.

I have added basic form validation, on major AJAX forms in use, before they are submitted using form.checkValididty(). This includes the the front page 'distance to move' element and the modal 'settings pages'. There may be additional AJAX form submission that I missed.

Since this was not working before it will introduce new validation conditions that may not be desirable. I tried to implement the same conditions as previously defined but am not sure if those were correct.

Possible problems:

• Inputs not required: I think all form inputs should provide the default or existing value; and be required. There are many inputs that are not required. This may be OK if the server side code provides defaults.
• Default values: Some decimal inputs provide a fixed default value rather than using a saved value.
• Some form inputs have Jinja2 conditional code that I do not comprehend. e.g.
  <input name="{{setting.key}}" {{'type="number" inputmode="decimal" pattern="^[0-9]*([\.,][0-9]{0,5})?$"' | safe if setting.value | isnumber else '' }} data-group="{{title}}" class="form-control" value="{{setting.value}}" {{'' if enableCustom or setting.custom != 1 else 'disabled'}}>
  I have modified these to use the pattern matching but do not know if they will work properly.
  Please explain what this Jinja2 code is doing?

Jinja2 macro for decimal inputs

I added 'template/macros.html' file that defines reusable input type 'number' inputmode type 'decimal' with a regex pattern, and error message using 'title' that defines major and minor decimal limits. This will make it easier in the future to make broad changes to all decimal inputs by changing one file.

Any page that creates a decimal number form input should include the macros.html file. At this point it is a simple implementation and can be easily edited. If it is too broad, or too limited, please let me know and I can adjust it.

There is a broad JQuery condition that matches all input 'type' = "number" with attribute 'pattern' = "regex" on document load.

Assumptions for decimals

I thought that almost all decimal inputs would match 4 major digits before decimal separator and 5 minor digits. These limits can be passed to the Macro.

Input type Number vs Text

From extensive testing on Android and limited testing on legacy iPhone (5) I see that form input type = "number" will always return a value using a period (.) as decimal separator no matter what locale is used (USA, UK, German, Polish). This value should always be valid using parseFloat() on server side. This does not work on existing input type "text" using attribute "pattern" where a comma (,) can be passed as decimal separator.

All of this is client side validation but should transliterate to exoitsing server side validation.

Testing

I have tested using desktop and mobile files for major functions, but do not know how this change/cascade for inputs that were previously incorrectly defined. It now makes form validation work, when it previously did not, so is a step up from previous code. Looks to be working on multiple Android versions but I only have legacy iPhone 5 so don't know if this is correct for newer iPhones.

Please discuss before committing

I tried to scan thought the code for possible input validation problems but don't know if I got them all. So before committing this PR please contact me using GitHub or Maslow Forums to make sure it will work.

Thanks,

[madgrizzle]

Please explain what this Jinja2 code is doing?

Which part of that line are you unsure about?

[gb0101010101]

Which part of that line are you unsure about?

{{ 'type="number" inputmode="decimal" pattern="^[0-9]*([\.,][0-9]{0,5})?$"' | safe if setting.value | isnumber else '' }}

Also would like to know:

• if forms validate correctly.
• if default input values are correct.
• if there are any other forms I have missed that use decimal inputs.

[gb0101010101]

If anyone can review this change I would greatly appreciate it. Currently WebControl does not work for locales other than USA. This would fix it.