Submit-form succes conditions

Hello everyone.

My goal is to restrict a number field in a form. I want only integers to be allowed.

While browsing the forum, I managed to target the field of my form and enforce an integer by showing an error message. This works very well if the user presses the Enter key on their keyboard. The field is not validated.

However, when the user clicks the submit button, the error message appears but the form is still validated. And I can’t seem to stop the form submission if the number is not an integer.

I have not been able to find more information on the forum. Here is my current code.

Thanks for your help

<script>
document.addEventListener('DOMContentLoaded', function() {
    var form = document.getElementById('form1');
    form.addEventListener('submit', function(event) {
        var numberInput = document.getElementById('form1-FIELD__IM266GU3D--1075406701');
        var value = numberInput.value;
        
        if (!Number.isInteger(Number(value))) {
            alert('Veuillez entrer un nombre entier.');
            event.preventDefault();
            event.stopPropagation();
        }
    });
});
</script>

Hi,

You can adapt your script this way and put it in the header custom code:

<script>
document.addEventListener('DOMContentLoaded', function() {
    var form = document.getElementById('form1');
    form.addEventListener('submit', function(event) {
        var numberInput = document.getElementById('form1-FIELD__IM266GU3D--1075406701');
        var value = numberInput.value;
        
        if (!Number.isInteger(Number(value))) {
            event.preventDefault();
            event.stopPropagation();
            alert('Veuillez entrer un nombre entier.');
        }
    }, true);
});
</script>

1 Like

Thanks a lot. It works perfectly. :+1: