One of the things that I really like that HTML5 has introduced is the required attribute for the input tag. The functionality isn’t as far along as I’d like, it would be cool if the browser would check for an email address if you set the type to email, but the fact that you don’t need to write any code to check if an input’s value is empty is pretty great. But, of course, the required attribute isn’t supported in some older versions of our favorite browsers and not in any version of Internet Explorer 9 and below. Lucky for us, it’s really easy to write a fallback for browsers that don’t support it.
I’m using jQuery because we want this to work in older versions of browsers, so instead of spending all the time writing the code to make it work, we’ll let jQuery do all the work for us.
Let’s say we had this as some HTML:
1 2 3 4 5 6 7 | <form action="#" method="post"> <label for="name">Name: </label><input class="required" type="text" name="name" required> <label for="email">Email: </label><input class="required" type="text" name="email" required> <label for="phone">Phone: </label><input class="required" type="text" name="phone" required> <label for="city">City: </label><input type="text" name="city"> <button type="submit">Submit</button> </form> |
We have four inputs and all but city are required, so not only do they have the required attribute for our HTML5 compliant browsers, they also have a class of required for our browsers that don’t support it. This is because we need a way to check these inputs while not bothering with the one’s that aren’t required. So we couldn’t just check all the inputs like I’ve done in other examples.
Now our JavaScript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var inputs = $('input'); var btn = $('button'); btn.on('click', function(e) { if (!inputs[0].required) { e.preventDefault(); for (var i = 0; i < inputs.length; i++) { if (inputs[i].className === 'required' && inputs[i].value === '' || inputs[i].value === 'This field is required') { inputs[i].value = 'This field is required'; return false; } } } }); |
First we grab all the inputs and the button using jQuery and then we add a click event to the button. Next is the part that makes all this work. We check the first input to see if it has an attribute of required and if it does then we don’t do anything. You’ll notice that we don’t even run preventDefault() because if we do that, then the browser won’t run any of the input’s default actions including the required functionality. If the input doesn’t have a required attribute then we know the browser doesn’t support it and we can run our own code. Now we loop through all the inputs and check first if they have a class of required and if they do, then we check if their value is empty or equal to “This field is required”. If it is, then when set the value to “This field is required” and return false to break the for loop.
This is pretty basic and wouldn’t work if the first input wasn’t required, although a form like that would be really weird. But it works well enough to show the basics and I’m sure without only a few more lines of code, it could be turned into a plugin that you could use on every form that had required fields.