Forms: Restrict Send to Button Click & Bootstrap Validation Reset

[AliGW]

Some of this might be due to the fact that I cannot fully test my form until it's published online, so forgive me if this is the case. I shall be doing a 'live' test next week.

Two observations:

1. When entering data into a field, I am used to being able to hit ENTER rather than TAB to move to the next field of an online form, but ENTER is trying to submit the form. How to I limit form submission to clicking or tapping on the SEND button only?

2. I am using bootstrap validation, which works well until I hit RESET. When I do, the fields of the form are emptied, but the validation green borders and ticks remain visible. How do I get the validation reset (removed) along with the form contents?

The form options are really good - I am enjoying learning to use them. When I used WebPlus, I used to use a little add-on called Forms2Go, which was brilliant, but required some gymnastics to integrate it. This, in comparison, is a piece of cake!

[AliGW]

I think I have worked out number 1 ...

But not quite! I hoped I'd be able to do it with an event, but there does not seem to be a setting for onENTER. Is there one, and if so, which is it?

[AliGW]

Another couple of observations:

1. When you have data saved by the browser (I have Firefox), it usually offers to insert the data for you. This happens, but it's putting my phone number into the last name field. How can I control this? Never seen this happen on a form before, so I am sure there must be something I haven't yet done.

2. Related to the above, if I select my E-mail from the autofill options, the bootstrap validation rejects it, even though it is correct. If I delete the last letter and type that letter in again, the validation accepts it. How can I get the validation to see the E-mail address as valid as is?

[Pablo]

Accordion to the bootstrap documentation, you will need to remove the validation classes:

Code: Select all

<script>
document.getElementById("reset").addEventListener("click", function() {
    document.querySelectorAll("input").forEach(function(input) {
        input.classList.remove("is-invalid");
        input.classList.remove("is-valid");
    });
});
</script>

where 'reset' is the ID of the button.

[AliGW]

Thanks, Pablo.

Do I add this to the button HTML? Which code tab should I add it to?

[AliGW]

Interesting. It works in the After Tag box on all fields except the comment field.

[Pablo]

This code includes support for the textarea.

Code: Select all

<script>
   document.getElementById("reset").addEventListener("click", function() {
    document.querySelectorAll("input, textarea").forEach(function(input) {
        input.classList.remove("is-invalid");
        input.classList.remove("is-valid");
    });
});
</script>

[AliGW]

I've been trying all sorts, but not both types together like that - thanks.

Any ideas about the autofill conundrum?

[Pablo]

You can disable auto fill, but you have no control over which data goes where.
This is browser functionality.

But it may be related to name (not the ID) of the field.

[AliGW]

OK - this is useful - thank you. I have one idea that I am going to try - will report back.

[AliGW]

OK, so this may help other people.

I discovered user error in the Last Name field: the input object was called phone by mistake, so that's now working as expected with autofill as I have changed it to last name.

Unfortunately, the code to remove the validation from the form on Reset is now not working, so I am going to have to go through everything again to see what I've done to make it fail. Ho, hum!

EDIT: Problem solved (I'd re-entered the code and forgotten to check that the object ID matched). All working as expected now, although the Captcha does not reset, but I'll deal with this once the form is server side.

Thanks all!

[AliGW]

So all that remains is how to prevent ENTER from submitting the form? I want the form to submit ONLY when the user clicks or touches the SEND button.

I was hoping I could override it and get the cursor to move to the next input field on ENTER.

[BaconFries]

Form Conditions and Calculations
Example 1: Enable the submit button with a Checkbox

[AliGW]

Thanks for this. I'm not sure it's working as I want - I'll test it once I upload the page to a test site.

[AliGW]

I've now got my form uploaded to a test server and have found that I can't get this to work.

I tried the IsEmpty option - if I apply this to any one of the input fields, then it renders the send button inoperable, regardless of whether the field is empty or not.

At the moment, I am working with my host to get the settings correct to send the form (it's throwing an error at the moment). Once I have this basic operation working, I shall revisit these finer points.

[Pablo]

If you need help with the submitting the form then it's important that you know the exact error.

See also the 'very important note' in the FAQ:
http://forum.wysiwygwebbuilder.com/viewforum.php?f=10

[AliGW]

Already done that - I have started a thread in the Forms section.