Extra form validation after submit?

Ask the community
1

Happy day Softr Community! Here’s what I’d like to do:

  1. User fills out form and submits
  2. Do some extra error checking in javascript
  3. If data is fine, continue submitting
  4. If data isn’t, send an alert message

I saw this to catch the submit event

<script>
window.addEventListener('submit-form-form1', (e) => {
  // e.detail is an object with form field names and values
  console.log('form submit', e.detail);
  // form submit { "Full Name": "Softr", "Email": "info@softr.io" }
});
</script>

but I have no idea how to prevent it from submitting. I tried

e.preventDefault();

but that didn’t work. Any ideas?

2

setCustomValidity is what we are looking for here. In my use case below I require the input field to be exactly 11chars long. So you just need to find the id of the input field and add your check to the vForm fn .

window.addEventListener('load', function() {

    setTimeout(function() {

        $('input[id="form2-id-472611674"]').attr("onchange", "vForm(this)");

    }, 1600);

});


function vForm(e) {

  e.setCustomValidity("");
  vid=e.value;
  if (vid.length != 11) {
     e.setCustomValidity("id should be 11 characters long");
  }

}
    
</script>
3 Likes
3

Thank you so much!