Html5 required attribute and CSS3 pseudo-classes (valid /invalid)

In Html5 there is an attribute called required it works as a validation when leave a required input empty for example:


Figure (1.0)

In this example if you click on submit Reservation the button will never do an action without filling the required input.
This required attribute returns true or false, CSS3 used this and created a pseudo class for valid and invalid required attribute.
For example:

In this example we can control the input style depend on the validation results if true (valid) the input background color will be green for the input that take the required attribute in html5 and if the result is false the CSS will fire the invalid styles rules .

Figure (1.1)

Figure 1.1 shows the styles when input required is invalid

Figure (1.2)

Figure 1.2 shows the styles when input required is valid

Html5 required and browsers Compatibility

The required attribute works in all major browsers, except Internet Explorer and Safari,But even so the required html5 popup style is different in every browser.

Figure (1.3)

Figure 1.3 shows the popup on Firefox

Figure (1.4)

Figure 1.4 shows the popup on Chrome

Figure (1.5)

Figure 1.5 shows the popup on Opera

Download Sample Page

How to authenticate to FaceBook Graph Api – Part II

As I mentioned in the previous post we are going to complete the basic information on how to authenticate Facebook Graph Api

In this post I will show you how to authenticate users via simple url requests without any programming language just to explain how are things going.
After creating Facebook Application as mentioned in the previous post you can request Facebook authentication dialog as following

When invoking Facebook login dialog, you must pass in your app id that is generated when you create your application that we mention before (the client_id parameter) and the URL that the user’s browser will be redirected back to once app authorization is completed (the redirect_uri parameter). The redirect_uri must be within the same domain as the Site URL you specify in Web site tab of the Developer App that we just mention before.

After invoking Facebook dialog, If the user is already logged in, Facebook validate the login cookie which stored on the user’s browser, authenticating the user. If the user is not logged in, they are prompted to enter their credentials:After user login you will see another facebook screen asks for Application access but this time its your applicationnotice again that your application requests to access just basic information of user . A full list of permissions is available in facebook permissions reference. There is a strong inverse correlation between the number of permissions your app requests and the number of users that will allow those permissions.
If the user presses Don’t Allow, your app is not authorized. The OAuth Dialog will redirect (via HTTP 302) the user’s browser to the URL you passed in the redirect_uri parameter with the following error information:


If the user presses Allow, your app is authorized. The OAuth Dialog will redirect (via HTTP 302) the user’s browser to the URL you passed in the redirect_uri parameter with an authorization code:


In order to authenticate your app, you must pass the authorization code and your app secret to the Facebook Graph API token endpoint at The app secret that we get from Facebook Application and should not be shared with anyone or embedded in any code that you will distribute.

If your app is successfully authenticated and the authorization code from the user is valid, the authorization server will return the access token:

Now you are successfully grant user and have the access token that is required for all the rest Facebook Graph Api needs to be continued ….

MongoDB Series – .Net Driver

In the previous posts we learned how to install MongoDB on windows platform, and then we learned how to manipulate with MongoDB. In this post we are going to learn how to deal with MongoDB but from a programming view. MongoDB supported many programming language and its driver, we are going through .Net driver as it’s one of the most popular frameworks.

Starting from the beginning, visit the downloading driver page in MongoDB official website

After downloading finished we will create a project – in our example will be web project. and added the references to it.

Our scenario will be creating a Blog example, so first we are going to add the connection to blog DB in the connectionString tag

Create the Mongo Helper class which responsible on connecting with the server.

now assume that our project has two domains Post and Comment , so simply we are going to create the two domains. let’s do it in Post

I’ll talk later specifically about the attribute but for now let’s do the simple domain.

The Service layer for the domain which will manage the CRUD functions, so create the PostService class as

The Create method simply creates new row by calling save, the Edit method gets a specific post by Query and updates its fields , the Delete method for delete a post and The GetPosts, GetPost methods for querying one post or all posts.

Download sample.