Form can be submitted without a required field

I have a Chronoforms 5 installation with a required field that is allowing people to submit even if the field isn't completed.

Required is set to "Yes" and I have it set as phone="yes". All other fields are "no".

Extra parameters is set as

data-inputmask='mask' : '(999)999-9999'

Is there a fix for this? It's extremely frustrating.

Hi emills01,

Please post a link to the form so I can take a quick look.

Bob

Hi emills01,

Please post a link to the form so I can take a quick look.

Bob

http://www.nbphealth.com/

Hi emills01,

I checked with Chrome IE and FireFox and the validation and mask for the Your Phone input appear to be working correctly in all three.

How exactly can I replicate the problem? Is there something specific that fails?

Bob

Yes - the two fields marked "phone" and "county" simply don't require anything for the form to be submitted when they are clearly required fields. The "county" I maybe can understand because there is a placeholder selection "Select..." so that technically is a selection, but the phone doesn't. Maybe the mask is registering as text input? I don't know.

The problem can be replicated by filling out the form except those two fields and submitting.

Hi emills01,

The County problem an be fixed by removing the Select...=Select... option and putting Select... into the Empty Option box.

The Phone validation is working when I test, I can't submit with that empty. Which browser are you using, that might make a difference?

Bob

I'm using Chrome; I'm not sure what others are using.

Hi emills01,

Me too.

Bob

I just tried it twice.

The first time it tried to auto fill the field. I deleted it, and it went through.

The second time I didn't allow it to auto fill the field, and it didn't go through.

Could there be an issue with autofill?

Hi emills01,

It might be - you can try adding autocomplete=off to the Extra Params box and see if that makes a difference.

Bob

Is there a proper way to separate each command in Extra Params, or is it one per line? Right now I have it as:

data-inputmask='mask' : '(999)999-9999'
autocomplete=off

...and it is still allowing autocomplete values.

Hi emills01,

That looks correct to me but it isn't showing up in the Form HTML

<input name="Phone" id="Phone" value="" placeholder="" maxlength="26" size="" class="validate['required','phone'] form-control A" title="" style="" data-inputmask="'mask' : '(999)999-9999'" data-load-state="" data-tooltip="" type="text">

Bob

That's because I had removed it after I determined that it wasn't working properly.

It's back in now.

Hi emills01,

Yes you are right - odd behaviour. I think that what happens is that the validation gets 'ticked' when the field is autocompleted and isn't 'unticked' again when it is cleared later. Maybe a custom validation is the only answer to this particular combination?

Bob

Hi emills01,

Yes you are right - odd behaviour. I think that what happens is that the validation gets 'ticked' when the field is autocompleted and isn't 'unticked' again when it is cleared later. Maybe a custom validation is the only answer to this particular combination?

Bob

How is that done?

the validation gets 'ticked' when the field is autocompleted and isn't 'unticked' again when it is cleared later.

And shouldn't the new code prevent the autocomplete from even being available in the first place?

Hi,

I have a similar problem that's seems to be related to the input mask. When I use my Lastpass autofill in Firefox it fills in maybe the last 1 or 2 number of the phone number for example.
I've changed the extra Parameters as suggested:
autocomplete=off
data-inputmask='mask' : '99 9999 9999'
The phone number now appears as __ ____ __77 which of course passes the required element test. (Interestingly my mobile number doesn't have a double 7 either.)
The page is https://secure.efac.org.au/index.php?option=com_chronoforms5&chronoform=EFAC_Membership
Thanks,

Chris A