Customized form issues

[PCorbucci]

Hi everyone

First of all, i'm not a dev, unfortunately… 
Here is the problem: 

We needed to force our customers to use only capitals, numbers and NO spaces on a specific field. 
We customized the form to prevent people from posting random stuff on this field by adding a popup message… 
Problem is: when they click the OK on this popup, the form gets submitted… 
Here is the code we are using: 

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
 // Créer le formulaire HubSpot
 hbspt.forms.create({
 portalId: "6890729",
 formId: "ac539db6-0778-4698-b3a4-9a99260e279d",
 onFormReady: function($form) {
 // Sélectionner le champ du formulaire que vous souhaitez valider
 var inputField = $form.find('input[name="plaque_d_immatriculation"]'); // Remplacer par le bon attribut 'name' ou 'id'
 
 // Appliquer un écouteur sur l'événement 'input' pour forcer le respect du regex
 inputField.on('input', function() {
 // Utiliser la regex pour forcer la frappe
 var value = inputField.val();
 
 // Remplacer tout ce qui ne correspond pas à des lettres majuscules ou chiffres
 var sanitizedValue = value.replace(/[^A-Z0-9]/g, '').toUpperCase(); 
 
 // Mettre à jour la valeur du champ
 inputField.val(sanitizedValue);
 });
 },

 onFormSubmit: function($form) {
 // Appeler la fonction de validation au moment de la soumission
 const isValid = validateInput($form);

 // Retourner false si la validation échoue pour empêcher l'envoi
 if (!isValid) {
 return false;
 }

 // Autoriser la soumission si la validation est correcte
 return true;
 }
 });

 // Fonction de validation : uniquement lettres majuscules et chiffres
 function validateInput($form) {
 // Sélectionner l'élément du formulaire correspondant au champ que vous souhaitez valider
 var inputField = $form.find('input[name="plaque_d_immatriculation"]'); // Remplacer par le bon attribut 'name' ou 'id'
 
 // Récupérer la valeur de l'input
 var inputValue = inputField.val(); // Utilisation de jQuery pour la valeur dans un formulaire HubSpot

 // Expression régulière pour valider uniquement majuscules et chiffres
 var regex = /^[A-Z0-9]+$/;

 // Valider la valeur de l'input
 if (!regex.test(inputValue)) {
 // Afficher un message d'erreur si le format n'est pas correct
 alert("Veuillez entrer uniquement des lettres majuscules et/ou des chiffres, sans espaces ni caractères spéciaux.");
 return false; // Empêche la soumission du formulaire
 }

 return true; // Si la validation est correcte, autorise la soumission
 }
</script>

Can someone help?

[PCorbucci]

Hi Abramam and thank you so much for your update. It helps me understand the way the script works. That's very useful. 
however, as i implemented the revised code into my script, replacing the OnFormSubmit part by the one you kindly provided, i did not notice any change in the form behavior… I can type whatever i want in the field, the systems warns me when i click Submit, but when i click OK on the warning window, the form gets submitted 😞 

I wish i was a developper ! 😄

[BérangèreL]

Hi @PCorbucci and thanks @GiantFocal for the help!

Your contribution is really appreciated!

I'd be happy to check with @Bortami and @zach_threadint: Hello, do you happen to have additional tips to share with @PCorbucci, please?

Thanks a lot and have a great weekend!

Best,
Bérangère

[GiantFocal · Accepted solution]

Hi @PCorbucci,

Based on your codes, there is a "return true" after your IF condition. So, even if the condition is false, your JS returns true, which triggers the form submission.

You can place the return true statement within an "else" condition to ensure the form is submitted when the condition is false. Please take a look at the revised code below:

onFormSubmit: function($form) {
 // Appeler la fonction de validation au moment de la soumission
 const isValid = validateInput($form);

 // Retourner false si la validation échoue pour empêcher l'envoi
 if (!isValid) {
  return false;
 } else {
 // Autoriser la soumission si la validation est correcte
 return true;
 }
 
 }
 });

 // Fonction de validation : uniquement lettres majuscules et chiffres
 function validateInput($form) {
 // Sélectionner l'élément du formulaire correspondant au champ que vous souhaitez valider
 var inputField = $form.find('input[name="plaque_d_immatriculation"]'); // Remplacer par le bon attribut 'name' ou 'id'
 
 // Récupérer la valeur de l'input
 var inputValue = inputField.val(); // Utilisation de jQuery pour la valeur dans un formulaire HubSpot

 // Expression régulière pour valider uniquement majuscules et chiffres
 var regex = /^[A-Z0-9]+$/;

 // Valider la valeur de l'input
 if (!regex.test(inputValue)) {
 // Afficher un message d'erreur si le format n'est pas correct
 alert("Veuillez entrer uniquement des lettres majuscules et/ou des chiffres, sans espaces ni caractères spéciaux.");
 return false; // Empêche la soumission du formulaire
 } else {
return true; // Si la validation est correcte, autorise la soumission
 }
 
 } 

[BérangèreL]

Bonjour Pierre @PCorbucci et bienvenue dans la Communauté !
Nous sommes ravis de vous avoir ici !

Great question, thanks for asking the Community!

I'd love to put you in touch with some of our Top Experts on this matter: Hi @Jnix284, @zach_threadint and @Stephanie-OG do you have suggestions to help @PCorbucci, please?

Thanks so much and have a lovely day!

Best,
Bérangère