CMS Development

PCorbucci
Participant

Customized form issues

SOLVE

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?

0 Upvotes
1 Accepted solution
GiantFocal
Solution
Top Contributor | Partner
Top Contributor | Partner

Customized form issues

SOLVE

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.

 

GiantFocal_1-1730171979503.png

 

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
 }
 
 } 

 

 

 

 

 

Best regards,
Ernesto @ GiantFocal
Found this answer helpful?
Marking it as the solution helps both the community and me - thanks in advance!

View solution in original post

4 Replies 4
PCorbucci
Participant

Customized form issues

SOLVE

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 ! 😄

0 Upvotes
BérangèreL
Community Manager
Community Manager

Customized form issues

SOLVE

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


Saviez-vous que la Communauté est disponible en Français ?
Rejoignez les discussions francophones en changeant votre langue dans les paramètres !

Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings!


0 Upvotes
GiantFocal
Solution
Top Contributor | Partner
Top Contributor | Partner

Customized form issues

SOLVE

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.

 

GiantFocal_1-1730171979503.png

 

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
 }
 
 } 

 

 

 

 

 

Best regards,
Ernesto @ GiantFocal
Found this answer helpful?
Marking it as the solution helps both the community and me - thanks in advance!
BérangèreL
Community Manager
Community Manager

Customized form issues

SOLVE

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


Saviez-vous que la Communauté est disponible en Français ?
Rejoignez les discussions francophones en changeant votre langue dans les paramètres !

Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings!


0 Upvotes