Page 1 of 1
Forms: Restrict Send to Button Click & Bootstrap Validation Reset
Posted: Tue Mar 31, 2026 6:14 am
by 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!
Re: Forms: Restrict Send to Button Click & Bootstrap Validation Reset
Posted: Tue Mar 31, 2026 6:44 am
by 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?
Re: Forms: Restrict Send to Button Click & Bootstrap Validation Reset
Posted: Tue Mar 31, 2026 7:12 am
by 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?
Re: Forms: Restrict Send to Button Click & Bootstrap Validation Reset
Posted: Tue Mar 31, 2026 7:20 am
by 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.
Re: Forms: Restrict Send to Button Click & Bootstrap Validation Reset
Posted: Tue Mar 31, 2026 7:25 am
by AliGW
Thanks, Pablo.
Do I add this to the button HTML? Which code tab should I add it to?
Re: Forms: Restrict Send to Button Click & Bootstrap Validation Reset
Posted: Tue Mar 31, 2026 7:33 am
by AliGW
Interesting. It works in the After Tag box on all fields except the comment field.
Re: Forms: Restrict Send to Button Click & Bootstrap Validation Reset
Posted: Tue Mar 31, 2026 8:02 am
by 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>
Re: Forms: Restrict Send to Button Click & Bootstrap Validation Reset
Posted: Tue Mar 31, 2026 8:07 am
by AliGW
I've been trying all sorts, but not both types together like that - thanks.
Any ideas about the autofill conundrum?
Re: Forms: Restrict Send to Button Click & Bootstrap Validation Reset
Posted: Tue Mar 31, 2026 8:41 am
by 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.
Re: Forms: Restrict Send to Button Click & Bootstrap Validation Reset
Posted: Tue Mar 31, 2026 8:52 am
by AliGW
OK - this is useful - thank you. I have one idea that I am going to try - will report back.
Re: Forms: Restrict Send to Button Click & Bootstrap Validation Reset
Posted: Tue Mar 31, 2026 9:07 am
by 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!
Re: Forms: Restrict Send to Button Click & Bootstrap Validation Reset
Posted: Tue Mar 31, 2026 9:21 am
by 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.
Re: Forms: Restrict Send to Button Click & Bootstrap Validation Reset
Posted: Tue Mar 31, 2026 9:43 am
by BaconFries
Form Conditions and Calculations
Example 1: Enable the submit button with a Checkbox
Re: Forms: Restrict Send to Button Click & Bootstrap Validation Reset
Posted: Tue Mar 31, 2026 10:00 am
by 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.
Re: Forms: Restrict Send to Button Click & Bootstrap Validation Reset
Posted: Wed Apr 01, 2026 5:16 am
by 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.
Re: Forms: Restrict Send to Button Click & Bootstrap Validation Reset
Posted: Wed Apr 01, 2026 6:34 am
by 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
Re: Forms: Restrict Send to Button Click & Bootstrap Validation Reset
Posted: Wed Apr 01, 2026 6:52 am
by AliGW
Already done that - I have started a thread in the Forms section.