[jQuery] Re: How can I generalize this code for all values?

[Rick Faircloth]

I see in your example code that you're still using a hard-coded name
for the input.  I'd like it completely generalized for all variables.

I'm working towards creating code for categories of input types:  text,
radio, checkbox, and textarea, etc.

I modified your example, and all seems to be working well with the code
below, except that the submit button is becoming enabled even when there
is an error message showing.  I don't understand the last line enough
to even tinker with that...suggestions?

Thanks, Rick

Here's the new code:

$(document).ready(function() {
                
     $("inp...@type='text']").each(function() {

          $(this).blur(function() {
               var val = $.trim(this.value);

               if (val == "") 
                  { $("#" + this.id + "_error").fadeIn(500); }
               else
                  { $("#" + this.id + "_error").fadeOut(500); }
                    $("#submit").attr('disabled', (val == "") ? "disabled" : 
"");
          });
     });
});




> -----Original Message-----
> From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On 
> Behalf Of MorningZ
> Sent: Monday, December 22, 2008 1:44 PM
> To: jQuery (English)
> Subject: [jQuery] Re: How can I generalize this code for all values?
> 
> 
> Just some advice:   why mix "-" and "_" all up?  it makes it easier if
> they were the same
> 
> for instance
> 
> <input type="text" id="street_number" />
> <img id="street_number_error" src="error.png" />
> 
> <input type="text" id="street_name" />
> <img id="street_name_error" src="error.png" />
> 
> 
> $("input[id^='street_']").each(function() {
>        var val = $.trim(this.value);
>        if (val == "") {
>              $("#" + this.id + "_error").fadeIn(500);
>        }
>        else {
>              $("#" + this.id + "_error").fadeOut(500);
>         }
>         $("#submit").attr("disabled", (val == "") ? "disabled" : "");
> });
> 
> 
> 
> 
> On Dec 22, 1:10 pm, "Rick Faircloth" <r...@whitestonemedia.com> wrote:
> > Don't know if that's the best phrasing for the subject,
> > but what I'm trying to do is develop some code that
> > will work for all for inputs of type 'text', instead
> > of hard-coding the id values.
> >
> > The original code is this:
> >
> > $('input#street_number').blur(function() {
> >
> >      if (this.value.length == 0)
> >      { $('#street-number-required-error').fadeIn(500);
> >        $('#submit').attr('disabled', 'disabled') }
> >      if (this.value.length > 0)
> >      { $('#street-number-required-error').fadeOut(500);
> >        $('#submit').attr('disabled', '') };
> >
> > });
> >
> > $('input#street_name').blur(function() {
> >
> >      if (this.value.length == 0)
> >      { $('#street-name-required-error').fadeIn(500);
> >        $('#submit').attr('disabled', 'disabled') }
> >      if (this.value.length > 0)
> >      { $('#street-name-required-error').fadeOut(500);
> >        $('#submit').attr('disabled', '') };
> >
> > });
> >
> > Here's my coding attempt: (no errors in firebug, but not response
> > from the DOM)...
> >
> > $(document).ready(function() {
> >      $("inp...@type='text']").each(function(i) {
> >           $(this).blur(function() {
> >                if (this.value.length == 0)
> >                { $(this.id.replace(/_/g, '-')+'-error').fadeIn(500);
> >                  $('#submit').attr('disabled', 'disabled') }
> >                else
> >                { $(this.id.replace(/_/g, '-')+'-error').fadeOut(500);
> >                  $('#submit').attr('disabled', '') }
> >           });
> >      });
> >
> > });
> >
> > Anyone care to offer guidance to get this working?
> >
> > Thanks,
> >
> > Rick