Using the F12 Developer tools package with IE9 I was able to find the error:

SCRIPT438: Object doesn't support property or method 'getElementsByTagName'
jquery.js, line 16 character 59007

The solution is simple, update your jQuery to the latest version (at the time of this writing, 1.6.2). The version I had installed on the website (1.5) is not compatible with IE9. ]]> http://elementdesignllc.com/2011/08/script438-object-doesnt-support-property-or-method-getelementsbytagname/feed/ 0 http://elementdesignllc.com/2011/06/jquery-validation-word-count-custom-method/ http://elementdesignllc.com/2011/06/jquery-validation-word-count-custom-method/#comments Tue, 14 Jun 2011 20:50:50 +0000 chad http://elementdesignllc.com/?p=909 The jQuery Validation plugin is one of the best ways to validate your forms client side. It has built in functions to check the maximum amount of characters allowed in each form field, which works great in many situations.

However for a project I am currently working on the client requires text areas to have a word limit instead of a character limit. There are some solutions out there to do this separately from the jQuery Validation plugin, however I decided to write and release a custom method that can be implemented directly into any form.

The Code

The following “addMethod” needs to be placed after jQuery and jQuery Validation is loaded, but before the actual validation call:

$.validator.addMethod("wordCount",
   function(value, element, params) {
      var typedWords = jQuery.trim(value).split(' ').length;

      if(typedWords <= params[0]) {
         return true;
      }
   },
   jQuery.format("Only {0} words allowed.")
);

The method first creates the “typedWords” variable, which simply counts the amount of spaces on the text area. Then using “typedWords” the method checks against the predefined max length (params[0]).

The next code snippet is a sample of how you can call the custom method with your form. For example, I have a textarea named “comments” that I want to apply this method to:

$("#contactform").validate({
   rules: {
      comments: {
         required: true,
         wordCount: ['10']
      }
   },
});

When we call the wordCount method, we can also define the max amount of words allowed. Simply change ['10'] to any number you wish.

WHERE first_name LIKE :term AND last_name LIKE :term

This worked fine until I did some usability testing. I found that a lot of users typed in the first AND last name, without looking at the results that were already showing. The SQL statement above worked until they started to type in the last name.

To fix this, I used the MySQL CONCAT_WS function:

CONCAT_WS(' ',first_name,last_name) LIKE :term

I used CONCAT_WS instead of CONCAT because this added space inbetween the first and last name. Now the one jQuery UI Autocomplete field works as expected when typing out a full name!

An effective way to deal with this is a simple Javascript solution: hashing the password client-side using a jQuery plugin, then transferring that hashed version of the password to server side. To ensure proper security, this script uses sha256, which is a cryptographic hash function developed by the National Security Agency (NSA).

The Form

Preparing the HTML form is simple, it only takes 2 fields to make this happen: User Name and Password.

<form name="user_login" id="user_login" method="post" action="">
   <label for="user_name">User Name</label>
   <input type="text" name="user_name" value="" />

   <label for="user_password">Password</label>
   <input type="password" name="user_password" id="user_password" value="" />

   <input type="submit" name="login" value="Login" />
</form>

The Javascript

jQuery is required for this to work, be sure to have it included on the top of the page. The plugin for hashing the password can be found at: http://www.alexweber.com.br/jquery/sha256/jquery.sha256.js

Now however you handle the submit, be sure to run these two lines of code:

$("#user_password").val($.sha256($("#user_password").val()));

The Javascript code finds the plain text value of the password (in the user_password field), hashes it using the plugin we included, then changes the user_password field to that hashed version.

That’s all there is to it! Before the password even leaves the client’s machine to the internet, it will now be hashed.

50 jQuery Snippets That Will Help You Become A Better JavaScript Developer

$("#signup_form").validate({
   submitHandler: function(form) {
      alert("Test");
      form.submit();
   }
});

The alert box and form submitted correctly in Firefox. However in Chrome, the alert box worked, but after that the form refused to submit. I narrowed down the issue to be with the actual name of the submit input on the form. I had named the submit input “submit”, which had some sort of conflict with the plugin. Renaming the submit input to anything else, like “newname” fixes the issue.

In short, to fix this, change:

<input type="submit" name="submit" value="Sign Up" />

to

<input type="submit" name="newname" value="Sign Up" />

$(":checkbox").attr("checked", true);

You can change the selector to target certain groups of checkboxes.

To deselect all checkboxes, simply change the “true” to “false”:

$(":checkbox").attr("checked", false);

Inline Datepicker Demo

The key component to making it work is using the onSelect event. Here is the jQuery code, with “#datepicker” as a div:

$("#datepicker").datepicker({
   onSelect: function(dateText, inst) {
      $("#datepicker_value").val(dateText);
   }
});

“#datepicker_value” is an input field that is updated every time the user selects a different date. This input field can be easily added to any form for submit. Visit the Datepicker demo page for a working example.

Convert all dollar signs ($) to ‘jQuery’

The dollar sign is reserved in WordPress for the Prototype library, which is why it errors out. For example, instead of:

$().ready(function() {
   $("#select_me").show();
});

Change it to:

jQuery().ready(function() {
   jQuery("#select_me").show();
});

There is documentation on their website on how to use boxWidth and boxHeight to deal with large resolution pictures, however it does not tie together those methods with the preview pane (visit the demo this post is referencing).

Assuming you are using boxWidth to shrink down the image to 500 pixels wide, with a thumbnail 80 pixels by 80 pixels, use the following code to correctly display the preview pane.

jQuery('#cropbox').Jcrop({
   onChange: showPreview,
   onSelect: updateCoords,
   aspectRatio: 1,
   boxWidth: 500
});

function showPreview(coords) {
   if (parseInt(coords.w) > 0) {
      var rx = 80 / coords.w;
      var ry = 80 / coords.h;

      var img_height = $("#cropbox").height();
      var img_width = $("#cropbox").width();

      jQuery('#preview').css({
         width: Math.round(rx * img_width) + 'px',
         height: Math.round(ry * img_height) + 'px',
         marginLeft: '-' + Math.round(rx * coords.x) + 'px',
         marginTop: '-' + Math.round(ry * coords.y) + 'px'
     });
   }
};

The variables img_height and img_width find the new dimensions of the image, which are unique for images with different dimensions. The variables are then used to make calculations for the width and height of the preview pane.