New to the community? Start here

[Forminator Pro] Using Phone Validation API on Forminator

Hello,

We have a Forminator-built form with phone number field that I'd like to validate using API service from NumVerify.com.

Is this doable?

Thanks,

Edy

Thu, 20 Jun 2019 17:32:24
More Forminator Pro discussions
Forminator Pro
  • Ash
    • Code Norris

    Hello Edy

    This might be possible if there is any available hook. We have sent your issue to our second level support team. I can’t confirm, but if there is any option, they will definitely help. Please note that, they deal with more complex issues, so there might be little delay. We appreciate your patience on this.

    Have a nice day!

    Cheers,

    Ash

  • Kostas
    • CTO

    Hi Edy ,

    I’ve checked the documentation of numverify and I think that the easiest way to “actively” check for a phone number would be to implement a JS snippet as an addition that would make AJAX calls to that api for verification and then you can act on the form accordingly depending on their reply ( i.e. disable the submit button and show an error ).

    Do you already have access to their API so I can make some tests in case I could come up with a snippet supporting this? I can’t make any promises until I’ve tested everything but it seems doable for the time being.

    Regards,

    Konstantinos

  • Kostas
    • CTO

    Hey Edy ,

    I've made a mu-plugin with a JS snippet as an example of how this could be implemented.

    How to install:

    Always make sure to keep a backup of your site before changing/adding custom code.

    1] Navigate to your /wp-content/ directory and create a new one named mu-plugins if it doesn't exist.

    2] Inside the mu-plugins folder create a file named frmt-numverify.php

    3] Edit the file and copy / paste this code snippet inside.

    <?php
    

    
add_action(
    
'wp_footer',
    
function() {
    
?>
    
<script>
    
( function( $ ) {
    
$( '.custom-phone input' ).on( 'focusout', function() {
    
// set your access key here
    
var access_key = 'YOUR_KEY_HERE',
    
phone_number = $( this ).val();
    

    
console.log( phone_number );
    

    
// verify phone number via AJAX call
    
$.ajax({
    
url: 'http://apilayer.net/api/validate?access_key=' + access_key + '&number=' + phone_number,
    
success: function( response ) {
    
if ( response.valid ) {
    
$( '.custom-phone div.forminator-field' ).removeClass( 'forminator-has_error' );
    
$( '.forminator-button.forminator-button-submit' ).attr( 'disabled', false );
    
$( '.forminator-error-message.numver-phone' ).remove();
    
} else {
    
$( '.custom-phone div.forminator-field' ).addClass( 'forminator-has_error' );
    
$( '.custom-phone div.forminator-field' ).append( '<span class="forminator-error-message numver-phone" aria-hidden="true">Please input a valid Phone Number.</span>' );
    
$( '.forminator-button.forminator-button-submit' ).attr( 'disabled', true );
    
}
    
}
    
});
    
} );
    

    
$( document ).ready( function() {
    
$( '.forminator-button.forminator-button-submit' ).attr( 'disabled', true );
    
} );
    
} ( jQuery ) );
    
</script>
    
<?php
    
},
    
999
    
);

    4] Save and close the file.

    5] The final path should look like /wp-content/mu-plugins/frmt-numverify.php

    You simply have to insert a text or phone field into your Form and add the "custom-phone" as an additional CSS class like so:

    [attachments are only viewable by logged-in members]

    Make sure to also replace the "YOUR_KEY_HERE" in the code with your Numverify API key so the script can freely communicate with their servers.

    What this does essentially is that it disables the submit button when you load the page and then whenever the number is changed it makes an ajax call to Numverify to see if the number is ok.

    If it's not ok it will add an error message like so ( you can edit that on the code I've provided as well ) and the submit button will stay as disabled:

    [attachments are only viewable by logged-in members]

    And when the number is finally "ok" it will remove the error messages and enable the submit button as well:

    [attachments are only viewable by logged-in members]

    Please note that with this method the JS script will be visible on your sites source code, if you want to enhance it and have the access codes hidden you can choose other PHP methods from example in numverify's documentation.

    Regards,

    Konstantinos