Mandatory fields not being enforced since upgrade to 5.4

[neilnewman]

We have just upgraded to Verj.io 5.4 and have found that users accessing our forms from the I.E Browser are not having mandatory fields enforced, all appears to be OK with users accessing the forms via Chrome.
Any help would be great as it is rather URGENT

[neilnewman]

I have noticed that this issue appears to be something to do with our forms running html5, if I switch them to html4, IE enforces mandatory fields.
Is there a better work around than switching back to html4 because the warning box under html4 is rather ugly?

[Steve]

Hi Neil,


I think that you are right about the HTML5. I believe this is our default. There are few things you can do:

1) Change the forms to HTML 4 in the form properties. But as you say these show JavaScript popups with an error message.

2) The other option is to implement your own client side validation and use something like Sweet Alerts to show an error message:

https://sweetalert.js.org/

But this might be a lot of work if you have lots of validation to do.

3) Another alternative is to use server side validation and use the messages. The communication between the browser and the server uses Ajax, all the form submission is done by Javascript. This makes interaction smooth and does not reload the entire page contents.

Kind regards

Steve Upton

[neilnewman]

Hi Steve,
Thanks for the reply, why did we not have this issue before we upgraded Ebase from 5.3.2 to 5.4, we were still using html5 as the default for our forms?

I hear Microsoft are planning to dump I.E/Edge in favour of a Chromium based browser which hopefully will not have the same problem, but that will be some way away, so I guess in the meantime we are stuck using html4 in Ebase.

We have around eighty forms online and many of these have mandatory fields, so we don't really want to amend them all. From what I can tell it only impacts I.E and older versions of Firefox which in itself, is a bit strange.

Is this still an issue in the next release of Ebase 5.5?

Many thanks
Neil

[Steve]

Hi Neil,

I think that the HTML 5 mandatory fields were introduced in 5.4.

I have just looked at the source and I think you can add a system property to remove the "required" attributes from the input HTML types:

Code: Select all

-DdontUseHtml5ForMandatoryCheck=true

If you add this to the server startup and restart the server.

Kind regards

Steve

[neilnewman]

Hi Steve,
Thanks for the update, I gave it a test but unfortunately this basically replicates the html4 configuration and I get the standard ugly Java script popup windows.
What we would really like is for I.E popups to work in native html5 mode and the popup boxes to look decent, any clue as to why nearly every browser works apart from I.E?

Many thanks
Neil

[Steve]

Hi Neil,

Which version of IE are you having problems with? The required attribute should be supported from IE 10+. I would also expect that Edge would work also.

See the link below

https://html5test.com/compare/browser/i ... ge-12.html

for feature support.

Steve

[Steve]

I'm not sure if this will help:

https://stackoverflow.com/questions/263 ... bute-via-i

Steve

[neilnewman]

Hi Steve,
The issue is with I.E 11 (standard with Windows 10).

Has no one else reported this as an issue, or are we the first to spot the problem?

Basically I.E just ignores the "Required" fields and lets you move onto the next page in the form.
Edge does work along with Chrome and Firefox.

Many thanks
Neil

[Steve]

Hi Neil,

I cannot see anyone else reporting this issue. I will test this tomorrow morning and then get back to you.

One thing to ask.. could the IE be running in compatibility mode? This might cause issues.

Steve

[neilnewman]

Hi Steve,
I have checked it out in compatibility mode and without compatibility mode, but on both occasions it ignores the "required" fields and allows me to go to the next page

Many thanks
Neil

[neilnewman]

Hi Steve,
I have put up a test form that you should be able to access. This appears to work in all browsers apart from IE, I have tested this both internally and externally.
https://windmz.dartford.gov.uk/ufs/BP.eb (Just click the "Next" button at which point it should prompt for the "Required" field value).

Thought this might help you determine if it is a setup issue with our installation, or something more generic.

Thanks again
Neil

[Steve]

Hi Neil,

I think I am making some headway with this problem. I tested a really basic form:

https://www.w3schools.com/tags/att_form_novalidate.asp

And then edited the HTML to remove the novalidate attribute from the Form element and add required field to the username input field. This works as expected in IE 11 (with and without novalidate attribute in the form).

I then inspected our code and noticed that we force the novalidate attribute to be set if HTML 5 and let our JavaScript do the validation. I think there is a problem in the JavaScript and IE 11 when validating input fields. It does not appear to fail HTML5 validation mandatory field check. This will need further investigation to see the differences are between other browsers and IE 11 when validating the input fields.

Kind regards

Steve Upton

[Steve]

Hi Neil,

I have found the error. The error is inside the vldt540.js (our validation JavaScript). If the HTML is HTML5, then we run it through a method that calls reportValidity() on an HTML element. This method is not supported in IE and it throws an error that we catch and just carry on.

I will have to submit this as a bug, but you could temporarily fix it by showing an alert message in the JavaScript vldt540.js:


replace the following method com.ebasetech.ufs.Vldt.html5RequiredCheck with:

Code: Select all

/** 
 * This validator checks HTML5 required (mandatory)
 * For radio button and checkbox lists all elements are checked
 * Note that browsers treat checkboxes in a group (list) as separate elements and each one has its own independent valueMissing property
 * Radio buttons in a group are treated as a group by browsers - valueMissing will be false if any element is selected
 */
com.ebasetech.ufs.Vldt.html5RequiredCheck = function(vldtInput, userValue, propertyValue)
{
    var els = document.getElementsByName(vldtInput.name);
    var valueExists = false;
    try
    {
	    for (var i=0; i<els.length; i++)
	    { 
	    	var el = els[i]; 
		    if (el.validity)
		    {
				if (!el.validity.valueMissing)
					valueExists = true;
		    }
		    else
		    {
		    	// this shouldn't happen
		    	valueExists = true;     
		    }
		}
		if  (!valueExists)
		{
			if (vldtInput.requiredMessage)     
				el.setCustomValidity(vldtInput.requiredMessage);     // set the required error message
				if(!el.reportValidity)
				{
					  var f = vldtInput.description ? vldtInput.description : "Field"
					 var msg = vldtInput.requiredMessage ? vldtInput.requiredMessage :  f + ' requires a value';
					 alert(msg);
				}
				else
					el.reportValidity();    // get the browser to show the user the error 
			com.ebasetech.ufs.Main.errorAlert = false;  // suppress the Ebase alert message
		}
		return valueExists;
	}
	//ignore any errors here - could be old/non-standard browsers
	catch (e) {
		alert(e);
	}
	 
    return true;
      
}

Note that the method com.ebasetech.ufs.Vldt.html5ValidityCheck needs a similar same change (Probably show the message Validation error).

There are more elegant ways to show a message or popup than alert, but I have not demonstrated that here.

The vldt540.js script can be found in:

<ebase-install-dir>/UfsServer/tomcat/webapps/ufs/javascript

Also note that the JavaScript has been stripped of whitespace so you might want to format it first.

I will add to our bug tracker and hopefully this will be fixed in the next release.

I hope this helps

Steve

[neilnewman]

Many thanks for your help Steve,
I will give it a go and let you know.

Kind regards
Neil

[neilnewman]

Hi Steve,
Thanks for the fix, I have now put it in place and all looks to be working as hoped.
Many thanks for all your help
Neil

[Segi]

I created a new form on our dev server running 5.4 with a field marked as required and a button that displayed an alert from the server side

When I click on the button a Verj IO alert appears that says that the field is mandatory as expected. I tested it out on Firefox, Chrome and Edge. Sounds like an IE11 specific issue

Edit: Tested on I.E 11 and can confirm that validation is NOT done in I.E

[neilnewman]

Hi Segi,
Yup I agree it appears to be an I.E feature, however we did also notice the issue using an older version of Firefox.
I think it is a typical Microsoft non standard feature built into its browser.
Steve's temp fix appears to get around the problem and allows the browsers that do work to display their far better "field required" prompts rather than the general clumsy Javascript alert box.

[Jon]

I can confirm that this is mostly an IE issue. The problem has been fixed and will be included in the next release. The fix caters for any browser (i.e. not just IE) that doesn't fully support the Validation API, and any such browser will then default to the old behaviour of showing the alert popup.