Tag: jQuery

Simple required field validation using jQuery

Posted on | by brian | Leave a Comment on Simple required field validation using jQuery

Sometimes, you work within the constraints of an existing application, trying to change as little as possible. So when a client had a very simple (two field) form, that showed up as a Bootstrap modal, and I needed to make sure the user didn’t click the submit button until they filled out all the fields, I simply dropped in the following JavaScript.

$(document).on('change keyup', '[required]', function() {
		var targetForm = $($('[required]')[0].form);
		var requiredOk = targetForm.find('[required]').filter(function () { return $(this).val().length == 0; }).length == 0;
		targetForm.find(':submit').prop('disabled', !requiredOk);
});

I then marked up my form fields by adding required property to each field that was required to be true. A simplified example follows.

<form id="form1">
  <input type="text" id="input1" required /><br />
  <textarea id="textarea1" required></textarea><br />
  <button type="submit" disabled>
  Submit
  </button>
</form>

Now, your submit buttons will automatically disable/enable. It doesn’t work in more complex forms with other field types, but I did start off by saying this was a “simple” solution, after all.

JSFiddle here: https://jsfiddle.net/05wyu3az/

Forcing the min/max on HTML number inputs

Posted on | by brian | Leave a Comment on Forcing the min/max on HTML number inputs

HTML5 has fantastic new features — one of them is type="number" attribute for input tags, which (among other things) restricts the user to only entering numbers (and spawning the number keyboard on mobile phones) and giving a (not always useful) widget that lets you increase/decrease the number. Unfortunately, one piece is missing (at least from most browsers I’ve seen): restricting the input to numbers within the min/max range.

Fortunately, a little JavaScript (via jQuery) can fix that. Add the below to your site, and any input type="number" tags on your site will have their min/max values enforced.
Continue reading →

Outlining textbox input fields (and getting it to work in IE)

Posted on | by brian | 6 Comments on Outlining textbox input fields (and getting it to work in IE)

While using Google GMail today, I noticed that they put a blue highlighting around the text input boxes when they have input focus. It’s a nice touch that makes it just a bit easier for users to identify which field their typing in. (Safari users, of course, get this on all web sites out of the box.)

Getting this to work on your web site is a simple matter of applying some CSS styles. The trick is to give your normal inputs fields a 1px border and a 1px margin; then, when they have focus, give them a 2px border (with a different color if you so choose) and no margin. This will ensure the dimensions of the element don’t change when the border width changes.

The following CSS provides an example of styling text boxes (both text and password inputs, and multi-line text boxes) and select lists (single and multi-line) with an alternate outline when holding the input focus.

input[type=text], input[type=password], textarea, select {
border-top: solid 1px #8e8e8e;
border-right: solid 1px #d1d1d1;
border-left: solid 1px #d1d1d1;
border-bottom: solid 1px #e4e4e4;
margin: 1px;
padding: 2px;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
border-color: #4488cc;
border-style: solid;
border-width: 2px;
margin: 0;
}

Like many good web tricks, this’ll look great in Firefox but won’t do anything in Internet Explorer. That’s because IE (through version 7) doesn’t support attribute selectors (as in [type=text]) or the :focus selector. To get things to work in IE, we need to rely on a little more CSS and some JavaScript.

Continue reading →