<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>SciWerks.com &#187; Forms</title>
	<atom:link href="http://www.sciwerks.com/blog/category/forms/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.sciwerks.com/blog</link>
	<description>Software for scientists, by scientists</description>
	<lastBuildDate>Fri, 24 Oct 2008 01:02:08 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>How to use an auto_complete to validate passwords</title>
		<link>http://www.sciwerks.com/blog/2007/01/31/how-to-use-an-auto_complete-to-validate-passwords/</link>
		<comments>http://www.sciwerks.com/blog/2007/01/31/how-to-use-an-auto_complete-to-validate-passwords/#comments</comments>
		<pubDate>Thu, 01 Feb 2007 02:04:20 +0000</pubDate>
		<dc:creator>Kevin Olbrich</dc:creator>
				<category><![CDATA[AJAX]]></category>
		<category><![CDATA[Forms]]></category>
		<category><![CDATA[Ruby on Rails]]></category>
		<category><![CDATA[User Interface]]></category>
		<category><![CDATA[auto_complete]]></category>

		<guid isPermaLink="false">http://www.sciwerks.com/blog/2007/01/31/how-to-use-an-auto_complete-to-validate-passwords/</guid>
		<description><![CDATA[As a follow up to my previous article about using auto_completes to ensure unique filenames, I&#8217;ve put together a bit of code that does essentially the same thing except that it checks a password field to ensure that it meets certain criteria.




# view file


&#60;%= text_field_with_auto_complete :user, :password %&#62;&#60;div id=login_error&#62;&#60;/div&#62;


&#160;


# model file


&#160;


def User &#60; ActiveRecord::Base


&#160; validates_length_of [...]]]></description>
			<content:encoded><![CDATA[<p>As a follow up to my previous article about using auto_completes to ensure unique filenames, I&#8217;ve put together a bit of code that does essentially the same thing except that it checks a password field to ensure that it meets certain criteria.</p>
<div class="codesnip-container" >
<div class="codesnip" style="font-family: monospace;">
<ol>
<li class="li1">
<div class="de1"><span class="co1"># view file</span></div>
</li>
<li class="li1">
<div class="de1">&lt;%= text_field_with_auto_complete :user, :password %&gt;&lt;div id=login_error&gt;&lt;/div&gt;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="co1"># model file</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">def</span> User &lt; ActiveRecord::Base</div>
</li>
<li class="li1">
<div class="de1">&nbsp; validates_length_of :password, :<span class="kw1">in</span>=&gt;<span class="nu0">3</span>..<span class="nu0">20</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">end</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="co1"># controller file</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">def</span> auto_complete_for_user_password</div>
</li>
<li class="li1">
<div class="de1">&nbsp; @user = User.<span class="me1">new</span><span class="br0">&#40;</span>params<span class="br0">&#91;</span>:user<span class="br0">&#93;</span><span class="br0">&#41;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; @user.<span class="me1">valid</span>?&nbsp; <span class="co1"># ensures the errors array is populated</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; password_errors = @user.<span class="me1">errors</span>.<span class="me1">on</span><span class="br0">&#40;</span>&#8216;password&#8217;<span class="br0">&#41;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; render :update <span class="kw1">do</span> |page|</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp;page.<span class="me1">replace_html</span> &#8216;login_error&#8217;, <span class="br0">&#40;</span>password_errors.<span class="me1">empty</span>? ? <span class="st0">&quot;&quot;</span> : password_errors<span class="br0">&#41;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;<span class="kw1">end</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">end</span> </div>
</li>
</ol>
</div>
</div>
<p>This will indicate when a password does not meet the validation criteria defined in the model.  You can add custom validations to check the strength of the password itself.<br />
<script type="text/javascript"><!--
google_ad_client = "pub-1072568092760209";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
google_ad_channel = "";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
]]></content:encoded>
			<wfw:commentRss>http://www.sciwerks.com/blog/2007/01/31/how-to-use-an-auto_complete-to-validate-passwords/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Passing extra data with an auto_complete</title>
		<link>http://www.sciwerks.com/blog/2006/11/21/passing-extra-data-with-an-auto_complete/</link>
		<comments>http://www.sciwerks.com/blog/2006/11/21/passing-extra-data-with-an-auto_complete/#comments</comments>
		<pubDate>Tue, 21 Nov 2006 19:23:43 +0000</pubDate>
		<dc:creator>Kevin Olbrich</dc:creator>
				<category><![CDATA[AJAX]]></category>
		<category><![CDATA[Forms]]></category>
		<category><![CDATA[Ruby on Rails]]></category>
		<category><![CDATA[User Interface]]></category>
		<category><![CDATA[auto_complete]]></category>

		<guid isPermaLink="false">http://www.sciwerks.com/blog/2006/11/21/passing-extra-data-with-an-auto_complete/</guid>
		<description><![CDATA[A quick and easy method to pass additional data to an auto_complete_for method.]]></description>
			<content:encoded><![CDATA[<p>I recently found myself trying to use an auto_complete field to allow the user to select an object from a list of possible objects.  That&#8217;s all fine and dandy, but I wanted to exclude certain values depending on which object I was editing.  There are at least two ways to do this, the first is to stuff the extra data into the session and then read that value from the auto_complete_for method and act appropriately.</p>
<p>I don&#8217;t really like this approach because I don&#8217;t want to clutter up the session with various form parameters.  Thankfully, there is a simple way to do this by once again abusing the built in text_field_with_auto_complete function&#8230;</p>
<div class="codesnip-container" >
<div class="codesnip" style="font-family: monospace;">
<ol>
<li class="li1">
<div class="de1"><span class="co1"># View</span></div>
</li>
<li class="li1">
<div class="de1">&lt;%= text_field_with_auto_complete &#8216;new_object&#8217;, &#8216;name&#8217;, <span class="br0">&#123;</span> :tabindex=&gt;<span class="nu0">1</span> <span class="br0">&#125;</span>, <span class="br0">&#123;</span>:url=&gt;<span class="br0">&#123;</span>:action=&gt;&#8217;auto_complete_for_object_name&#8217;, :extra=&gt;@object.<span class="me1">extra</span><span class="br0">&#125;</span> %&gt; </div>
</li>
</ol>
</div>
</div>
<p>[In my case, I used the :extra data to exclude certain objects from the auto_complete_for response]</p>
<p>By passing the :url option, you rewrite the URL that the AJAX actions call, enabling you to add extra parameters that can be acted on by the method.  Also note that you can change the name of the action called (in fact, you need to specify it or it will default to the name of the action for the current view&#8230; probably not what you want).  This is handy because it lets you assign the response to a variable with a different name without writing a separate auto_complete_for handler.  In this case, the submitted form will have a &#8216;new_object[name]&#8216; in the params, even though the action called was &#8216;auto_complete_for_object_name&#8217;.</p>
<p>Needless to say, you need to write a custom &#8216;auto_complete_for&#8217; method to handle the extra data.  Note that you could also use this method to handle multiple auto_complete fields. </p>
<p><script type="text/javascript"><!--
google_ad_client = "pub-1072568092760209";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
google_ad_channel = "";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
]]></content:encoded>
			<wfw:commentRss>http://www.sciwerks.com/blog/2006/11/21/passing-extra-data-with-an-auto_complete/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Live Forms.  Part 1: Putting the errors in the right place</title>
		<link>http://www.sciwerks.com/blog/2006/11/05/live-forms-part-1-putting-the-errors-in-the-right-place/</link>
		<comments>http://www.sciwerks.com/blog/2006/11/05/live-forms-part-1-putting-the-errors-in-the-right-place/#comments</comments>
		<pubDate>Mon, 06 Nov 2006 02:33:59 +0000</pubDate>
		<dc:creator>Kevin Olbrich</dc:creator>
				<category><![CDATA[Forms]]></category>
		<category><![CDATA[Ruby on Rails]]></category>
		<category><![CDATA[User Interface]]></category>

		<guid isPermaLink="false">http://www.sciwerks.com/blog/2006/11/05/live-forms-part-1-putting-the-errors-in-the-right-place/</guid>
		<description><![CDATA[This is Part 1 of a series describing how to make better forms for Rails.
The standard rails approach to handling form validation errors is to spit out a long list of all validation errors in a box at the top of the form.  The problem with this approach is that there is a separation [...]]]></description>
			<content:encoded><![CDATA[<p><em>This is Part 1 of a series describing how to make better forms for Rails.</em></p>
<p>The standard rails approach to handling form validation errors is to spit out a long list of all validation errors in a box at the top of the form.  The problem with this approach is that there is a separation between the list of errors and the field that spawned them, like this.  </p>
<p><img id="image30" src="http://www.sciwerks.com/blog/wp-content/uploads/2006/11/figure1.gif" alt="Figure 1 - Default Rails Form Layout" /></p>
<p>This can be a bit annoying, particularly in a long form where the error message and the offending form field may not appear on the screen at the same time.  Notice that you have to first read the error message, and then read the titles of all the fields to find the offending one(s) that need to be corrected.  They aren&#8217;t even in the same order as they were specified in the form, which makes it even more confusing.  This is just extra work for the user, particularly if your form is long or complex.</p>
<p>One way to address this problem is to put the appropriate error message right next to the field with the error.  This way, it&#8217;s pretty obvious where the problems are, and even what they are.  You can also generally avoid using the name of the field in the message.<br />
A simple example of this might look like this&#8230;.</p>
<p><img id="image29" src="http://www.sciwerks.com/blog/wp-content/uploads/2006/11/figure2.gif" alt="Figure 2 - Inline Error Messages" /></p>
<p>This still isn&#8217;t pretty, but at least the user knows exactly which fields need correcting, and a little CSS magic can even place the message to the right of the offending field.</p>
<p>So how do we implement this?</p>
<p>Simple&#8230; first go into your view and delete the
<div class="codesnip-container" >error_messages_for &#8216;object&#8217;</div>
<p> line.</p>
<p>Then stick this in your application helper.</p>
<div class="codesnip-container" >
<div class="codesnip" style="font-family: monospace;">
<ol>
<li class="li1">
<div class="de1"><span class="co1"># application_helper.rb</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">def</span> error_for<span class="br0">&#40;</span>object, method = <span class="kw2">nil</span>, options=<span class="br0">&#123;</span><span class="br0">&#125;</span><span class="br0">&#41;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">if</span> method</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; err = instance_variable_get<span class="br0">&#40;</span><span class="st0">&quot;@#{object}&quot;</span><span class="br0">&#41;</span>.<span class="me1">errors</span>.<span class="me1">on</span><span class="br0">&#40;</span>method<span class="br0">&#41;</span>.<span class="me1">to_sentence</span> <span class="kw1">rescue</span> instance_variable_get<span class="br0">&#40;</span><span class="st0">&quot;@#{object}&quot;</span><span class="br0">&#41;</span>.<span class="me1">errors</span>.<span class="me1">on</span><span class="br0">&#40;</span>method<span class="br0">&#41;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">else</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; err = @errors<span class="br0">&#91;</span><span class="st0">&quot;#{object}&quot;</span><span class="br0">&#93;</span> <span class="kw1">rescue</span> <span class="kw2">nil</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">end</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; options.<span class="me1">merge</span>!<span class="br0">&#40;</span>:<span class="kw1">class</span>=&gt;&#8217;fieldWithErrors&#8217;, :id=&gt;<span class="st0">&quot;#{[object,method].compact.join(&#8217;_')}-error&quot;</span>, :style=&gt;<span class="br0">&#40;</span>err ? <span class="st0">&quot;#{options[:style]}&quot;</span> : <span class="st0">&quot;#{options[:style]};display: none;&quot;</span><span class="br0">&#41;</span><span class="br0">&#41;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; content_tag<span class="br0">&#40;</span><span class="st0">&quot;p&quot;</span>,err || <span class="st0">&quot;&quot;</span>, options <span class="br0">&#41;</span>&nbsp; &nbsp; &nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">end</span> </div>
</li>
</ol>
</div>
</div>
<p>Then in your form view, add an &#8216;error_for&#8217; call wherever you need one&#8230;</p>
<div class="codesnip-container" >
<div class="codesnip" style="font-family: monospace;">
<ol>
<li class="li1">
<div class="de1"><span class="co1"># _form.rhtml</span></div>
</li>
<li class="li1">
<div class="de1">&lt;p&gt;&lt;label <span class="kw1">for</span>=<span class="st0">&quot;code_project_name&quot;</span>&gt;Name&lt;/label&gt;</div>
</li>
<li class="li1">
<div class="de1">&lt;%= text_field &#8216;code_project&#8217;, &#8216;name&#8217;&nbsp; %&gt;</div>
</li>
<li class="li1">
<div class="de1">&lt;%= error_for &#8216;code_project&#8217;, &#8216;name&#8217; %&gt;&lt;/p&gt; </div>
</li>
</ol>
</div>
</div>
<p>If the model fails a validation test, then it will show the message right next to the field that caused the validation problem.<br />
Also note that if you define an instance variable called @errors containing a hash of field_names and messages, they will also be used.  This is handy for those form fields that don&#8217;t correspond to a model attribute.</p>
<p><em>Stay tuned for Part 2, where I will describe a how to make these error message dynamic with AJAX.</em></p>
]]></content:encoded>
			<wfw:commentRss>http://www.sciwerks.com/blog/2006/11/05/live-forms-part-1-putting-the-errors-in-the-right-place/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
	</channel>
</rss>
