Blocked Email domains on form submission
Blocked Email domains on form submission
Hey @CandiceLloyd
From my understanding the domains are blocked at the form level and not portal level, as you said. @MFrankJohnson had a solution in this older post on how he handles this, using a workflow as a triage point.
Blocked Email domains on form submission
Blocked Email domains on form submission
Hey @CandiceLloyd
You know what you might have figured it out!
You could create a varible that contains all the domains you with to block.
Then write a script that loops through those values on change as a vaildation process.
If it fails that validation prevent the form from being submitted, and possibly even remove the submit eventlistener.
We are actually looking at creating a repo on our site that would gate content and I'm sure we wouldn't want to just allow the competition to have it. This is a great usecase and I'd love to workwith and follow you through this case!
Blocked Email domains on form submission
Blocked Email domains on form submission
Blocked Email domains on form submission
Hey @CandiceLloyd
So I did some digging and just completed a brief test this morning. And I think we've got a good start.
Working with code from this article, we can bypass the form action(post), run our validation, and finally trigger the form submission. This does get a 415 error meaning the server rejected the submission, but my contact list says otherwise…we'll have to dive into that later. Or maybe someone with more experience in the area can help out!
Ill have some code up at somepoint today!
Blocked Email domains on form submission
First stab at this:
$(document).ready(function(){
const blockedDomains = ['verizon.com', 'att.net', 'hotmail.com'];
var checkExist = setInterval(function() {
if ($('form').length) {
console.log("Exists!");
clearInterval(checkExist);
var ourForm = $('form');
ourForm.on('submit', function() {
// Prevent Submission
preventDefault();
// Assign varible to email field value
var email = ourForm.find('input[type=email]').val();
// Extract the email's domain
var emailDomain = email.slice( ( email.indexOf('@') + 1 ), email.length );
// Test if the domain is in the blocked domains
var resp = $.inArray( emailDomain, blockedDomains ) ? true : false;
// Handle the response of our validation above
if (resp) {
// If resp is true
ourForm.submit();
} else {
// Else do nothing
return
}
});
}
}, 100); // check every 100ms
// Call checkExists
checkExist();
});
Blocked Email domains on form submission
Blocked Email domains on form submission
Blocked Email domains on form submission
Hey @CandiceLloyd I think I've got something that works!
HubDB Table:
| ID | blocked_domain |
|---|---|
| 12345 | gmail.com |
| 23456 | aol.com |
The Hubl:
<script>
window.blockedDomains = [ {% for row in hubdb_table_rows(**table #**) %} '{{row.**column_name**}}', {% endfor %} ]; </script>
The JS:
$(document).ready(function(){
const blockedDomains = window.blockedDomains;
$('form').on('submit', function(e) {
// Assign varible to email field value
var email = $('form').find('input[type=email]').val();
// Extract the email's domain
var emailDomain = email.slice( ( email.indexOf('@') + 1 ), email.length );
// Test if the domain is in the blocked domains
($.inArray( emailDomain, blockedDomains ) > -1) ? e.preventDefault() : void(0);
});
});
Blocked Email domains on form submission
Blocked Email domains on form submission
Hey @CandiceLloyd
Would you mind sending me a link to the landing page and a list of the blocked domains? With this info I should be able to test thoroughly.
Blocked Email domains on form submission
Blocked Email domains on form submission
Alright, so a few things:
Sorry I didn't catch this earlier .
It looks like HS handles form submissions differenctly than "native", so we've got to approach this differently.
Rather than catch the submission we'll have to prevent it all together.
The jQuery below fires a function when the email field changes. This function checks the email domain against the "blocked" list. If it is on the blocked list it disables the submit button.
$(document).ready(function(){
// Get blocked array
const blockedDomains = window.blockedDomains;
// Assign varible to email field value
var emailInput = $('form').find('input[type=email]');
emailInput.change(function(e) {
// Assign varible to email field value
var email = $('form').find('input[type=email]').val();
// Extract the email's domain
var emailDomain = email.slice( ( email.indexOf('@') + 1 ), email.length );
console.log('email changed');
if ( $.inArray( emailDomain, blockedDomains ) > -1 ) {
console.log('disabled the submit button');
$('input[type="submit"]').css({'opacity':'0.5'}).prop("disabled", true);
}
});
});
I threw in a .css({'opacity':'0.5'}) so i could see it work. You can adjust or remove this if you don't want to give the user a hint as to why they can't submit the form.
Blocked Email domains on form submission
Blocked Email domains on form submission
Blocked Email domains on form submission
Good morning @CandiceLloyd
A lot happening here, which leaves room for error. Good news I think we can simplify this quite a lot! I'll try to squeeze some time in today to go through everything.
But at a glance:
The way you're populating the blocked domain variable with Hubl doesn't look correct. It looks like you're pushing objects into the array, which doesn't need to happen.
Also if you're using an attached JS file and a custom module to get the code on the page we may want to declare the blocked domain s array as a global variable on the window object.
window.domains = [
{% for row in hubdb_table_rows(*table#*) %}
"'" ~ row.domain_column ~ "',"
{% endfor %}
];
With something like this we can access the data from anywhere on the page.
