I'm using the Facebook Registration Plugin (http://developers.facebook.com/docs/plugins/registration/) to register users for our site. The problem is I can't seem to get custom validation working and was wondering whether it's a mistake on my part or something wrong with Facebook.
This is the XFBML code that I'm using:
<fb:registration
fields="[{'name':'name'},
{'name':'email'},
{'name':'password','description':'Enter a password','type':'text'}]"
redirect-uri="http://local.dev"
onvalidate="validateFacebookRegistrationForm">
</fb:registration>
and I have a global function called validateFacebookRegistrationForm which has the following code in it:
function validateFacebookRegistrationForm(form) {
errors = {};
if (form.password == "") {
errors.password = "No Password Entered";
}
return errors;
}
I would expect hitting the register button on the form would do nothing and the validation message would show up... instead I get a popup like this:
http://i.imgur.com/ERxw3.jpg
Once the popup is closed, the form is validated ... and the error message shows. Clicking register again will not submit the form until the errors have been fixed - which is the how the form should behave in the first instance!
The Facebook Registration plugin does not client-side validate until AFTER the user has pressed "Register" and then in the popup pressed "Continue". Then, it will do the "client-side" validation... it really doesn't make sense to go in that order but that's how it seems to be.
Your code is fine.
Related
I try to add a Googla Pay button on a website. I follow the Google Pay implementation tutorial (https://developers.google.com/pay/api/web/guides/tutorial).
There is a code:
var paymentsClient = getGooglePaymentsClient();
paymentsClient.isReadyToPay(getGoogleIsReadyToPayRequest())
.then(function(response) {
//...
})
.catch(function(err) {
//...
});
I need to get some data from my server side before I call the above code so I do the http post request. Within success hanlder of my post request I call the above code. It works fine in my Android browser and my laptop browser. But it doesn't work from Safari. I get the "Unexpected developer error please try again later" error. If I call it without ajax request it works in Safari as well. Could someone suggest the solution?
Thanks for including the jsfiddle.
The reason that it's not working is because Google Pay tries to open a popup window when you call loadPaymentData in Safari. When a new window is triggered as the result of a click event (user initiated action), the popup window opens as expected. When it is triggered by a non-user initiated action, Google Pay gets loaded in the same window which ends up causing it to fail.
It looks like when you make an ajax request in the click handler and then call loadPaymentData, Safari considers it a non-user initiated action.
Check out the following example in Safari:
const ajaxButton = document.getElementById('ajax');
const nojaxButton = document.getElementById('nojax');
ajaxButton.addEventListener('click', event => {
$.get('/echo/json/', () => {
window.open('about:blank');
});
});
nojaxButton.addEventListener('click', event => {
window.open('about:blank');
});
I would recommend avoiding making any http calls on the button click event before loadPaymentData. If you can fetch the data before the button is clicked, then do so.
Out of interest, what kind of data are you fetching?
vendor/knpuniversity/oauth2-client-bundle/src/Client/OAuth2Client.php:
When I logout user and try to login with facebook again, often I get this exception - InvalidStateException. "User see Invalid state parameter passed in callback URL." Thats because there is no data in session. But why that can happen?
Using this bundle:
https://github.com/knpuniversity/oauth2-client-bundle
This is called from my facebook authenticator class:
public function getCredentials(Request $request)
{
// this method is only called if supports() returns true
return $this->fetchAccessToken($this->getFacebookClient());
}
Also noticed if I try again to login with facebook after this exception, then it logs in succesfully. But later noticed this is also not always the case.
I am thinking there is soemthing to do with race condition somewhere, because when I use xdebug and code stops at breakpoinst, it often workse ok.
The problem was chrome sending 2 requests because of prefetching.
https://www.keycdn.com/support/prefetching
When I enter url in address bar (for testing I had not made facebook button yet) chrome instantly loads it. Then I press enter and it loads it again. And things start happing what is unexpected when there are 2 requests to login with facebook.
Tested on firefox, there is no such problem. When I have made link to login to facebook and so I dont have to type in address bar, it also does not make prefetch and problem is gone on chrome also.
When a form is valid, I want it to POST the value to a web site.
I get the alert to fire nicely when the form is not valid, but I can't set the action and cause the form to submit when the form is valid.
So, the result should be that the form posts and the browser goes to the next page like a traditional html form.
<form name="userForm" ng-submit="submitForm(userForm)" novalidate>
......
validationApp.controller('mainController', function($scope) {
// function to submit the form after all validation has occurred
$scope.submitForm = function(form) {
if(form.$invalid){
alert("form invalid");
}
else
{
form.action="http://microsoft.com";
form.submit();
}
};
});
Angular doesn't works that way. Angular mostly expects a RESTful web service to answer its calls. Yes, you can get it working with action somehow. However, for redirecting you would have to make use of $location web service. Through $location you can redirect your page to next page.
$scope.submitForm=function(form){
if(form.$invalid){
alert("form invalid");
}
else
{
$http.post(url:'yourURL', yourData));
$location.path='newURL';
}
From the documentation on ngSubmit:
Additionally it prevents the default action (which for form means sending the request to the server and reloading the current page), but only if the form does not contain action, data-action, or x-action attributes.
Otherwise, I think you can pass $event to the function and trigger $event.srcElement.submit(). The object you're passing to the function isn't the form element itself, which is why it won't submit. If you want, you can pass both by doing ng-submit="submitForm($event, userForm)". Hope that helps!
I'm following the instructions given on FB Developer, but I just can't get client side verification to work on my registration form.
This code block is present in the body of my page:
<script src="http://connect.facebook.net/en_US/all.js#appId=000000000&xfbml=1"></script>
<fb:registration
fields="[{'name':'name'},{'name':'emailEdu','description':'Your .edu Email','type':'text'}]"
redirect-uri="http://www.lazydragonbooks.com"
onvalidate="validate">
</fb:registration>
<script>
function validate(form)
{
errors = {};
if (form.emailEdu !== "foo")
{
errors.foo = "You didn't type foo";
}
return errors;
}
</script>
EDIT:
I placed alert('foo') as the first line in the validate function but don't get the alert so it seems the function does not get called.
Check the Chrome debugging tools console errors for a javascript error. I am guessing something is failing that is causing it not to validate properly. Also, the line should be errors.emailEdu = "You didn't type foo"; not errors.foo = ...
I had the same problem while running the code on my local dev server. As soon as I ran the code at the domain URL registered for my Facebook app, it all worked fine.
That also fixed a problem where a weird 3 bar progress indicator was persisting on top of the registration form.
For some time now I try to figure out how these guys were able to add "Sign online here" button which is "install App" button on their fan-page tab:
http://www.facebook.com/GuinnessIreland?v=app_165491161181
I've read around the web and couldn't come up with any solid solution. The FBML and FBJS documentation left me with nothing.
So please, if anyone can help me with this.
NOTE: To make multiple tests on the Ajax request that are sent, do not accept the App install. It behaves differently after that.
I had some problems with finding out about it as well. There is no info about this kind of behavior in wiki or anywhere. I got it working after trying some possible solutions and the simplest one is to make user interact with content embedded in fan page tab such as click on something etc. Then you need to post an ajax request with requirelogin parameter to pop up to come out. The simple example would be:
user_ajax = function() {
var ajax = new Ajax();
ajax.responseType = Ajax.RAW;
ajax.requireLogin = true;
ajax.ondone = function(data) {
new Dialog(Dialog.DIALOG_POP).showMessage('Status', data, button_confirm = 'Okay');
}
var url = "http://yourappurl.com/request_handler"
ajax.post(url);
}
And the trigger for it:
Interaction
Then if user is known to be using your application (fan page tab) you can prompt him for additional permission like publish stream or email communication by calling:
Facebook.showPermissionDialog('publish_stream,email');
Hope this solves the problem.