Wednesday, 27 August 2014

Validating form elements using the new Html 5 required and pattern attributes.

Introduction


Html 5 has come a long way since the first draft appear sometime around 2010, and since that time most of the browsers has been in a catch-up race (though as at this moment most of the latest browsers are up to date). In this post, we will learn how the use the required and pattern attribute, which are part of the new goodies that html 5 brought with it to ease the web developers life.

So whats this required attribute?

The required attribute  is just a boolean attribute that determines whether the browser will submit a form whose elements marked with the attribute contains a value. Yeah I know that the definition made your head spin. What the required attribute does is just to tell browser that a value is"required" in any form element marked with the attribute. So if the form is being submitted and the browser sees that a form element marked with the attribute does not contain a value, the browser will prevent the form from being submitted. This attribute is usually used in those elements where the user is expected to input a value like the input elements (no pun intended). For example:

< input required name='email' >  

OR 

< input required='required' name='email' />

NB:
Now both attributes are the same, the type you choose will depend on will land you are coming from (html or xhtml).

What about the pattern attribute?

The pattern attribute is an attribute used to specify a regular expression which the browser will used to validate the value entered by the user. Validation has been done for centuries (alright for sometime since the inception of the html and javascript) using javascript. What it does is to tell the browser to validate whatever value entered by the user into the form tag marked with the attributes' regular expression. Likewise it is mostly used on input elements. An example of its use are:

< input type='text' name='email' pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}" />


What if the browser does not support this new attributes?

Whenever you are using html 5 and css 3 and you plan accommodating old browsers like the brothers in crime (internet explorer 6 - 8), you should try as much as possible to provide 'javascript polyfills' (ie: javascript implementation of the functionality that you are trying to use) as a fallback so that non-supporting browsers can still achieve the same function. You can  find free ones online or write your own depending on what you are trying to achieve like the one shown below



(function(){

    //Check if input natively supports the required attribute
    //using modernizr
    if( !Modernizr.input.required){

        //if not
        //Get the form element and hook up on submit
        // event handler to it
            var form = $('form');

        //on submit event handler
        form.on('submit', function(){
            var input = $('[required], [pattern]'),
                submitBtn = $('input[type="submit"]'),
                result = true;

            submitBtn.attr('disabled', 'disabled');

            input.each(function(){
                var self = $(this);

                if(self.val() === ""){
                    self.toggleClass("required");
                    result = false;
                }
                else{
                    var pattern = self.prop('pattern');

                    if(pattern !== null && pattern !== 'undefined'){
                        var value = self.val(),
                            regExp = new RegExp(pattern);
                        if(!regExp.test(value)){
                            result = false;
                            self.toggleClass('required');
                        }
                    }

                }
            });

            if(result === true){
                submitBtn.removeAttr('disabled');
            }

            return result;
        });
    }

})();

Conclusion

Using the new html 5 validation attributes is really the best and latest way to go at the moment as most recent and even not so recent browsers already has support for it.Whereby support is not provide you can then fall back to using javascript for the validation. For a complete example of where this attribute has been used together, click here to fork the code example from my github repo. Happy coding.



Sunday, 13 July 2014

Start small

For sometime now, I have been really drained and as unfocused as anyone can be. So many things were falling apart all around me, my 3 year relationship fell  by the way side, all my projects were half done, I was completely broke and none of my clients was responding, my pc developed a fault and nothing seem to be working. In short my life was a complete mess.

This situation made me to enter into deep reflection, soul searching and prayer. I began searching for the reason why 10+ hours can't put food on my table and why my projects take very long to complete. Why I can't seem to be able to get anywhere even after putting so much time and effort into what I do.

What I discovered 

After much soul searching, I discovered that my major problem was that I was trying to finish a whole elephant all by myself at once. That was why I couldn't finish any project that I started and often get bored with it which results in it being abandoned and left in the hall of fame for unfinished projects. 

Another pot hole to my success all this while was that I often tend to start a project from the back-end instead of the front-end. Although this  maybe argued, but as a solo developer and from the recent results of some of the changes I made. I discovered that its far more better to start a project from the front end as this will quickly help you to define and refine the domain model and the business logic, thereby giving you more bang for your efforts.

The take away

One major lesson I learned from my experience is that of "Starting Small". During the course of my inner journey and research, I discovered that as far software development  is concerned, if you are working alone or in a small team and working in a non-life threatening situation life (like commerce core system development), it is far better to start with the smallest number of features possible. Don't try to implement all the features or correct all the bugs before you set sail, rather get it into the open sea as quickly as possible and then let the early birds and beta testers lead the way. As time goes on, add features not solely based on feature request, but in line with the vision you have for the product. Peace...








Monday, 26 May 2014

A look at asp.net Identity

Introduction

So many good things are being trumpeted about asp.net identity by the big boys in the community. Things like how cool the asp.net identity is, how great the OWIN context is and how its the in-thing now, how two factor security guarantees absolute security for your app users among others . Though most some of these hypes are probably true, the questions that comes to mind is

  1. How is it better than what we already have?
  2. Why should one drop the good old membership system, its offspring the simple membership and start afresh to learn a completely new security system?
  3. What does it have to offer? among others.

I am not claiming that I have all the answers to these questions and many others that comes to mind but we will go through the whole process and see for ourselves what it is really and how we can benefit from the this new thing.

The asp.net Identity is instituted on three major .dll libraries, these are


  1. Microsoft.Aspnet.Identity.EntityFramework
  2. Microsoft.Aspnet.Identity.Core
  3. Microsoft.Aspnet.Identity.Owin

Microsoft.Aspnet.Identity.EntityFramework

This class library contains the data persistent part of asp.net identity that works with Entityframework. It is used for persisting the user details to the database. It contains the IdentityDbContext, IdentityUser, IdentityRole, IdentityUserLogin and IdentityUserClaim with their generic types. This can be installed using nuget console manager in visual studio  by running.

PM> Install-Package Microsoft.AspNet.Identity.EntityFramework

Which installs the EntityFramework and the Microsoft.Aspnet.Identity.Core by default as dependencies.

Microsoft.Aspnet.Identity.Core

This contains the core implementation of the asp.net identity design which is based on a set of interfaces like IUser, IUserClaimStore, IUserLoginStore, IUserPasswordStore among others. It also houses the default implementation of the these interfaces such as RoleManager, UserManager, UserLoginInfo typically used for managing roles, account and logins. This can be installed alone (as it has no dependencies) by running the following via nuget console manager in visual studio.

PM> Install-Package Microsoft.AspNet.Identity.Core

Microsoft.Aspnet.Identity.Owin 

This houses the Owin middleware used for the authentication of accounts both through third party system, local accounts systems and generation of cookies and user tokens which stores the authentication related information. When installed via visual studio nuget package manager, it also installs the above listed packages with a few others like Microsoft.Owin.Security, Microsoft.Owin.Security.Cookies, Microsoft.Owin.Security.Oauth as dependencies. 

PM> Install-Package Microsoft.AspNet.Identity.Owin

This is also the most recommended approach to install asp.net identity as it short circuits all the former installations and installs other packages needed by Asp.net Identity.

Conclusion

In this post we looked at some of the class libraries that houses the new authentication system introduced by microsoft along with visual studio 2013. In the next post we will look at why MS introduced a new authentication system and some of the core interfaces. Happy coding....