solarSunda Enhancements

[dpinney]

PROBLEM Models with blank names do not trigger error checking and will not run.

STEPS TO REPRODUCE

• Log in
• Create new solarSunda model
• Enter no name and immediately hit Run Model button
• Result: error on console.
• Expected behavior: model runs. (It will run if non-blank name is entered).

[mhxi]

CAUSE OF PROBLEM Safari supports HTML5 validation but won't display error messages or prevent invalid forms from submitting.

SOLUTION Use JavaScript to add event listener to form, manually check input values and toggle error messages. http://stackoverflow.com/questions/23261301/required-attribute-not-work-in-safari-browser

[dpinney]

Good research. Can you build a prototype of the linked solution in solarSunda.html and test in Safari?

[mhxi]

on separate branch 'safari-valid' https://github.com/dpinney/omf/commit/6767348e9fa8f90b4f8376883ddd5e1d4993aa97

added 'errorMessage' element to solarSunda.html added code to manually check Model name is not blank in omf.js : function checkModelName()

so far works for this case, but only checks 'Model Name' input.

[dpinney]

Great code. And great git management with the branch.

Could the validation code check the input.value against input.pattern? Then the solution would be generalizable to all of the input fields.

[dpinney]

Any reason why this code can't be generalized to any input field?

I think something like the following will work:

var list = document.querySelectorAll( 'input' );
errors = 0
for (var item of list) {
  var patt = new RegExp(item.pattern)
  if (!patt.test(item.value)) {item.style.background = 'red'; errors++}
}
if (errors>0) {alert('please fix inputs in red')}

[mhxi]

360

Sorry, I had modified the code from my previous comment here. I was using the below code, which I think is doing similar but not alerting all errors on the same run. I'll add in your fixes for alerting errors.

var inputs = document.getElementsByTagName('input')
for (var i = 0; i < inputs.length; i++) {
var patt = new RegExp(inputs[i].pattern)
if (!patt.test(inputs[i].value)) {
alert('Please fill out ' + inputs[i].name + ' field')
inputs[i].focus()
return false

[dpinney]

I missed that in the commit. Looks like you had the more general solution.

We should find a way to get the form submission to cancel. Moving the location of the inputForm.submit() snippet in checkModelName should do it.

[mhxi]

Fixed in 1f86470e73868eb770a97b13ca19ea686bdcf052