Simple validation of required fields in html5 mobile apps

I am working on an html5 mobile app and wanted a simple validation of required fields. Nothing fancy. Just a simple validation that would let the user know they left something blank. Since I was not interested in checking the format of the values entered in these fields, I felt that I should create something very generic that can be reused across platforms especially by using html5 features. A micro validation script, if I may.

So the setup is pretty easy. You need to mark your required input tags with the required attribute. Now, remember that this is an html5 attribute, so while older browsers won’t understand this it shouldn’t break anything. The next, optional, attribute to set is the data-tab-id, which when set tells validating function that it needs to mark that tab with an indication that it contains errors. This will be useful when you have data entry in multiple tabs.

<input id=”name” type=”text” placeholder=”name” maxlength=”25″ required=”required” data-tab-id=”#tab1″/>

Next is the CSS, simple, nothing extreme:

input.inputrequired{
border: 1px solid #ff0000;
}

a.haserrors{
color: #ff0000;
font-weight: bold;
}

The haserrors class is for the tab. You can change the selector for this class to match whatever tag you would have used with your tabs. Again, this is optional, you do not need to set the data-tab-id in the first place, if don’t need this and you will, in a moment, see why.

Finally, the script:

var _validateInput = function(e){
var currentTarget = e.currentTarget;
var tabId = currentTarget.dataset[“tabId”];
var tab = $(tabId);
var result = false;
if(currentTarget.required && currentTarget.value == “” && tab != null && typeof tab !== “undefined”){
$(“#” + currentTarget.id).css(“class”, “inputrequired”);
tab.addClass(“haserrors”);
}
else {
currentTarget.setAttribute(“class”, “”);
//before removing the haserrors from the tab class check if any other siblings are in error
if($(“#” + currentTarget.id).siblings(“.inputrequired”).length <= 0 && tab != null && typeof tab !== “undefined”){
tab.removeClass(“haserrors”);
}
//set result to true since this input is fine
result = true;
}
tab = null;
currentTarget = null;
return result;
};

The actual event trigger:

//validates onblur the inputs that have required attribute
$(“input”).on(“blur”, function(e){
validateInput(e);
}, false);

Although the required attribute is backward compatible, meaning no existing functionality would break, there is no need to worry about old browsers for mobile anyway. The data- attributes are an html5 addition as well. They won’t be recognized by older browsers and you cannot access the DOM string map dataset from an element in older browsers. And again, there is no need to worry about these things unless you are planning to use this for the desktop in which case you will need to replace the use of dataset with a JS framework’s data() method which provides cross-browser support.

One nice thing about the “required” attribute is that when you place fields with required attributes inside a <form> element, when the form is submitted, the browser automatically validates them and shows a nice tooltip that the a value is required for the element. I wrote this script because I wasn’t using a <form> element and don’t think the required attribute validation is supported in mobile webview at least it is not widely supported.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s