API integration with unbounce landing page for form validation

  • 4 July 2020
  • 3 replies
  • 174 views

 lp.jQuery(function($) {l;
    var ruleID = 'phoneNumberValidate';
 	var field = 'phone';
  	var message = 'Phone number status: invalid';
  	var rules = module.lp.form.data.validationRules[field];
  $.validator.addMethod(ruleID, function(value, field) {
    function ajax(url, num) {
  		return new Promise(function(resolve, reject) {
    		$.ajax({
        		url: url,
    			type: 'post',
        		data:{"data":num},
  			});
  		});
	}
    ajax(actualUrl, value).then(function(response){
        		var parsedData = JSON.parse(response); 
        		var status = parsedData.data.status;
          		console.log(status);
          		if(status == "invalid"){
      				return false;
                  	console.log("False returned");
        		}
        	}).catch(function() {
    			// An error occurred
  			});
        }, message);
rules[ruleID] = true;
});

Hello, This is code that i used to validate phone number. The way i intend it to work is it should make ajax request to an API endpoint and on base of that true/false response it should validate the phone input. If the response is true then number is validate and client will be able to submit form else form will not be submitted. But it’s not working as intended. Can anyone here tell me what i’m doing wrong here?? Is anything wrong with my ajax request ?? A bundle of thanks


3 replies

Userlevel 5

Hey @Muhammad_Bilal to make an API call you will need to stop the form submit, check your database, then submit the form.

Here is another post in the community with directions on how to do this.

Hi @Kyle.C , thanks for your reply.
I have tried this solution but couldn’t get it done. I was unable to stop form submission. I tried e.preventDefault() and e.stopPropagation() but didn’t work. I even tried to do it by adding custom validation rule as suggested by [Mark_Wainwright (Adding custom validation to form fields). I’m a programmer and have a form in my landing page. Can you tell me how to stop the form submit and check database? Please share any example.

Userlevel 5

Using lp.jQuery doesn’t work well in Unbounce anymore because it uses a really old jQuery version. Which is probably why your script isn’t working.

Also I am not a programmer, I’ve just learned a lot as needed. This user in that thread has properly updated the script to work with simple regex. But I bet you can include your ajax call using “window.ub.form” syntax instead of “lp.jQuery”

Reply