Tag Archives: forms

Add Pattern Support for HTML5 Input Type Number with jQuery

Leave a reply

Ran into an issue earlier today that I could not figure out and ended up asking my second question on StackOverflow in seven years.

I was trying to use <input type="number" pattern="[0-9]{8}"> to enforce 8-digit numbers while allowing leading zeros. This was being done on an optional field (no required attribute) and I could not understand why it was bypassing my pattern on the populated field (eg: value “1234” was accepted, pattern ignored).

Peter B. over at SO (kudos) pointed me to the MDN reference that provided the reason… number input does not support pattern attribute

By design! While their reasoning makes sense from a general perspective, the min/max attribute workaround does not help where leading zeros are acceptable (eg: min="00000001"is the same as min="1" for obvious reasons). Unfortunately I need all 8-digits for my purposes. I also tried using minlength and maxlength attributes as a hail-mary to no avail.

Here is a jQuery shim I wrote for my main script file thereby adding pattern support the <input type="number"> Continue reading →

Automatically expand textarea to fit content using jQuery without autogrow or autosize plugins

Leave a reply

I’m sure there is a more efficient way to do this, but it suited my needs.

<script>
$(function() {
    $('textarea').keyup(function(){
        $(this).each(function(index, element) {
            $(element).height(element.scrollHeight);
        });
    }).keyup(); //trigger event to initialize pre-filled textareas
});
</script>

Enjoy 🙂

Bookmarklet: Submit a login form using javascript within a bookmark

3 Replies

If you’re like me, you have many bookmarks to administration areas that require authentication. For you, this script is a priceless time-saver.

Let’s say your login page has a form similar to the following…

<form action="/login.php" method="post">
    <label>Username: <input type="text" name="user"></label>
    <label>Password: <input type="password" name="pass"></label>
    <input type="submit" value="Log In">
</form>

Some logins simply cannot be stored in the browser’s password system. So, to save you the extra effort of manually logging in on each visit to such pages, create a bookmark that automatically logs you into the system.

Here’s the code to submit that form using a bookmarklet… Continue reading →

Make the jQuery UI Datepicker use a jQuery Button

4 Replies

It has been bugging me for some time that the datepicker widget uses a normal button unless you tell it to use an image. Seeing that we are using the jQuery-UI framework, it makes sense to me that the button should be styled as such. After playing with the selectors and trying it a few different ways, here is how I made that boring datepicker button become a jQuery-UI button (with calendar icon). Continue reading →

Change CodeIgniter’s Form_validation error delimiters globally!

Leave a reply

I have seen this question all over the web and am surprised that nobody has actually offered such a simple solution.

Anyway, here is a quick, simple and painless way to set CodeIgniter’s error delimiters (used by the Form_validation library) one time for your entire application. Create “application/libraries/MY_Form_validation.php” with the following contents… Continue reading →

Reset fields to default values using jQuery

Leave a reply

Have you ever wanted to reset only fields in a particular section of the form without resetting all of the fields?

Here is how you can achieve this with jQuery 🙂

$('#reset_address').click(function (event) {
 event.preventDefault();
 $('#address_details :input').each(function() {
  if ($(this).is('select')) {
   $(this).val($(this).find('option[selected]').val());
  } else {
   $(this).val(this.defaultValue);
  }
 });
});

#address_details represents a <fieldset> within my <form>. When the user clicks the #reset_address link I revert the fields within the <fieldset> (not the entire form) back to their original values.

Note: defaultValue is a core JavaScript property. A conditional check for <select> was necessary since defaultValue only applies to <input> and <textarea> fields.

How to Add icons to Input (Submit and Reset) Buttons using jQuery UI

12 Replies

As you may have already noticed, most browsers do not support adding icons to <input type=”submit”> and <input type=”reset”> using jQuery UI. The code below will correct this issue by replacing matched <input> tags with appropriate <button> tags…

$(document).ready(function(){
 $('input:submit, input:reset').each(function(){
  $(this).replaceWith('<button type="' + $(this).attr('type') + '">' + $(this).val() + '</button>');
 });
});

We loop through each submit and reset button and replace it with a button tag using the original input’s value as the new button’s text. Since we are using the original input’s value attribute, it should not be considered optional. Otherwise, you’ll end up with a button that has no text unless you set it explicitly with the .button({label: ‘my button label’}) option unless you intend to show only the icon by calling .button({text: false}) option.

Now we can assign icons to the buttons without updating the html using the following code… Continue reading →

Validate email domain using PHP’s checkdnsrr with CodeIgniter

1 Reply

I recently noticed a bunch of garbage registrations for an existing client’s newsletter function written quite some time ago. After making a copy of the subscribers table and “cleaning” the data (proper-cased names, lowercased emails, etc), I started looking at ways to limit these automated registrations.

The client would not be happy with registration confirmation emails, so I decided to make a callback function for use with CodeIgniter’s Form Validation library. Since it was only needed in one location, this method made more sense to me than extending the main library.

Here is the function…

Continue reading →

PHP/MySQL Nested <select> using <optgroup> with LEFT JOIN on same table in a single query.

4 Replies

I looked around on the web for a while trying to find an example of what I was trying to do. Some were close, but none performed the JOIN portion of the query and on the same table from the SELECT portion (self referencing). So, here is the code I used to created a sub-category only dropdown using the parent categories as the optgroup labels.

Continue reading →

How to fix dtheatre’s FormMail.php v5.0 form variables

1 Reply

Well, if you’re here you most likey are not getting any data from your FormMail script in the email you received. The problem is that dthetre’s script expects register_globals to be turned on. Since PHP4, most installations have register_globals turned off. This means your script will not work unless the feature is enabled. Most hosts are not likely to enable this feature (we’re one of them).

So here’s a quick workaround for the script. Add this code right after the header section of the script (before “// for ultimate security, use this instead of using the form”).

CODE UPDATED – SEE BELOW

Continue reading →