[jQuery] Re: Select empty textbox fields
It's something in jQuery 1.3 ... the code works in Chrome and Safari
when I use jQuery 1.2.x.
On Feb 4, 10:59 am, brnwdrng wrote:
> Interesting postnote:
>
> The solutions given seem to work for the latest versions of Firefox,
> IE, and Opera; but fail in Chrome and Safari. They don't seem to be
> able to distinguish the empty text boxes from populated ones.
>
> On Feb 4, 8:53 am, brnwdrng wrote:
>
> > I got the second suggestion to work (Aaron's); though there was a
> > minor typo that had to be fixed - the ending double quote
> > before ).toggleClass
>
> > I fixed my secondary problem by removing the class from all the fields
> > prior to applying the shade effect on each user submit. So, it ends
> > up looking like this, for future viewers:
>
> > $("#<%= this.pnlInputFields.ClientID %> input").removeClass
> > ('inputFields_empty');
> > $("#<%= this.pnlInputFields.ClientID %> input[class='inputFields']:not
> > ([value])").toggleClass('inputFields_empty');
>
> > or, my lamer iteration version now works with the remove statement
> > preceding it:
>
> > $("#<%= this.pnlInputFields.ClientID %> input").removeClass
> > ('inputFields_empty');
> > $("#<%= this.pnlInputFields.ClientID %> input
> > [class='inputFields']").each(function(i) { $(this).toggleClass
> > ('inputFields_empty', $.trim($(this).val()).length < 1); });
>
> > Thanks for the help!
>
> > On Feb 4, 7:22 am, Aaron Gundel wrote:
>
> > > $("#<%= this.pnlInputFields.ClientID %>
> > > input[class='inputFields']:not([value])).toggleClass('inputFields_empty');
> > > should do the trick.
>
> > > On Tue, Feb 3, 2009 at 2:57 PM, brnwdrng wrote:
>
> > > > I have a set of text box inputs in a div, and want to color the empty
> > > > ones red (css) when a user attempts to submit incomplete fields. I've
> > > > tried this with and without an explicit iterator, as shown in the two
> > > > examples below.
>
> > > > (a)
> > > > $("#<%= this.pnlInputFields.ClientID %> input[class='inputFields']
> > > > [value='']").toggleClass('inputFields_empty');
>
> > > > (b)
> > > > $("#<%= this.pnlInputFields.ClientID %> input
> > > > [class='inputFields']").each(function(i) { $(this).toggleClass
> > > > ('inputFields_empty', $.trim($(this).val()).length < 1); });
>
> > > > The first one fails with an error message indicating that [value='']
> > > > is an unrecognized expression (Firebug), though [value='helloworld']
> > > > works, correctly toggling the inputFields_empty class on (but not off)
> > > > wherever it finds "helloworld" in a text box. I've tried countless
> > > > variations on this, and can't seem to get it right for an empty field
> > > > (tried :empty too).
>
> > > > The second one (b) works, at least initially, highlighting the empty
> > > > text boxes. Not as elegant as something like (a) might be, but I'll
> > > > use it if (a) is infeasible. Note that it only works the first time
> > > > my button is pushed; subsequent changes in the textbox fields (like
> > > > the user erasing them) fail to remove the inputField_empty class (not
> > > > posting back, just have a onclick call that runs this validator
> > > > method).
>
> > > > Any suggestions?
[jQuery] Re: Select empty textbox fields
Interesting postnote:
The solutions given seem to work for the latest versions of Firefox,
IE, and Opera; but fail in Chrome and Safari. They don't seem to be
able to distinguish the empty text boxes from populated ones.
On Feb 4, 8:53 am, brnwdrng wrote:
> I got the second suggestion to work (Aaron's); though there was a
> minor typo that had to be fixed - the ending double quote
> before ).toggleClass
>
> I fixed my secondary problem by removing the class from all the fields
> prior to applying the shade effect on each user submit. So, it ends
> up looking like this, for future viewers:
>
> $("#<%= this.pnlInputFields.ClientID %> input").removeClass
> ('inputFields_empty');
> $("#<%= this.pnlInputFields.ClientID %> input[class='inputFields']:not
> ([value])").toggleClass('inputFields_empty');
>
> or, my lamer iteration version now works with the remove statement
> preceding it:
>
> $("#<%= this.pnlInputFields.ClientID %> input").removeClass
> ('inputFields_empty');
> $("#<%= this.pnlInputFields.ClientID %> input
> [class='inputFields']").each(function(i) { $(this).toggleClass
> ('inputFields_empty', $.trim($(this).val()).length < 1); });
>
> Thanks for the help!
>
> On Feb 4, 7:22 am, Aaron Gundel wrote:
>
> > $("#<%= this.pnlInputFields.ClientID %>
> > input[class='inputFields']:not([value])).toggleClass('inputFields_empty');
> > should do the trick.
>
> > On Tue, Feb 3, 2009 at 2:57 PM, brnwdrng wrote:
>
> > > I have a set of text box inputs in a div, and want to color the empty
> > > ones red (css) when a user attempts to submit incomplete fields. I've
> > > tried this with and without an explicit iterator, as shown in the two
> > > examples below.
>
> > > (a)
> > > $("#<%= this.pnlInputFields.ClientID %> input[class='inputFields']
> > > [value='']").toggleClass('inputFields_empty');
>
> > > (b)
> > > $("#<%= this.pnlInputFields.ClientID %> input
> > > [class='inputFields']").each(function(i) { $(this).toggleClass
> > > ('inputFields_empty', $.trim($(this).val()).length < 1); });
>
> > > The first one fails with an error message indicating that [value='']
> > > is an unrecognized expression (Firebug), though [value='helloworld']
> > > works, correctly toggling the inputFields_empty class on (but not off)
> > > wherever it finds "helloworld" in a text box. I've tried countless
> > > variations on this, and can't seem to get it right for an empty field
> > > (tried :empty too).
>
> > > The second one (b) works, at least initially, highlighting the empty
> > > text boxes. Not as elegant as something like (a) might be, but I'll
> > > use it if (a) is infeasible. Note that it only works the first time
> > > my button is pushed; subsequent changes in the textbox fields (like
> > > the user erasing them) fail to remove the inputField_empty class (not
> > > posting back, just have a onclick call that runs this validator
> > > method).
>
> > > Any suggestions?
[jQuery] Re: Select empty textbox fields
I got the second suggestion to work (Aaron's); though there was a
minor typo that had to be fixed - the ending double quote
before ).toggleClass
I fixed my secondary problem by removing the class from all the fields
prior to applying the shade effect on each user submit. So, it ends
up looking like this, for future viewers:
$("#<%= this.pnlInputFields.ClientID %> input").removeClass
('inputFields_empty');
$("#<%= this.pnlInputFields.ClientID %> input[class='inputFields']:not
([value])").toggleClass('inputFields_empty');
or, my lamer iteration version now works with the remove statement
preceding it:
$("#<%= this.pnlInputFields.ClientID %> input").removeClass
('inputFields_empty');
$("#<%= this.pnlInputFields.ClientID %> input
[class='inputFields']").each(function(i) { $(this).toggleClass
('inputFields_empty', $.trim($(this).val()).length < 1); });
Thanks for the help!
On Feb 4, 7:22 am, Aaron Gundel wrote:
> $("#<%= this.pnlInputFields.ClientID %>
> input[class='inputFields']:not([value])).toggleClass('inputFields_empty');
> should do the trick.
>
> On Tue, Feb 3, 2009 at 2:57 PM, brnwdrng wrote:
>
> > I have a set of text box inputs in a div, and want to color the empty
> > ones red (css) when a user attempts to submit incomplete fields. I've
> > tried this with and without an explicit iterator, as shown in the two
> > examples below.
>
> > (a)
> > $("#<%= this.pnlInputFields.ClientID %> input[class='inputFields']
> > [value='']").toggleClass('inputFields_empty');
>
> > (b)
> > $("#<%= this.pnlInputFields.ClientID %> input
> > [class='inputFields']").each(function(i) { $(this).toggleClass
> > ('inputFields_empty', $.trim($(this).val()).length < 1); });
>
> > The first one fails with an error message indicating that [value='']
> > is an unrecognized expression (Firebug), though [value='helloworld']
> > works, correctly toggling the inputFields_empty class on (but not off)
> > wherever it finds "helloworld" in a text box. I've tried countless
> > variations on this, and can't seem to get it right for an empty field
> > (tried :empty too).
>
> > The second one (b) works, at least initially, highlighting the empty
> > text boxes. Not as elegant as something like (a) might be, but I'll
> > use it if (a) is infeasible. Note that it only works the first time
> > my button is pushed; subsequent changes in the textbox fields (like
> > the user erasing them) fail to remove the inputField_empty class (not
> > posting back, just have a onclick call that runs this validator
> > method).
>
> > Any suggestions?
[jQuery] Select empty textbox fields
I have a set of text box inputs in a div, and want to color the empty
ones red (css) when a user attempts to submit incomplete fields. I've
tried this with and without an explicit iterator, as shown in the two
examples below.
(a)
$("#<%= this.pnlInputFields.ClientID %> input[class='inputFields']
[value='']").toggleClass('inputFields_empty');
(b)
$("#<%= this.pnlInputFields.ClientID %> input
[class='inputFields']").each(function(i) { $(this).toggleClass
('inputFields_empty', $.trim($(this).val()).length < 1); });
The first one fails with an error message indicating that [value='']
is an unrecognized expression (Firebug), though [value='helloworld']
works, correctly toggling the inputFields_empty class on (but not off)
wherever it finds "helloworld" in a text box. I've tried countless
variations on this, and can't seem to get it right for an empty field
(tried :empty too).
The second one (b) works, at least initially, highlighting the empty
text boxes. Not as elegant as something like (a) might be, but I'll
use it if (a) is infeasible. Note that it only works the first time
my button is pushed; subsequent changes in the textbox fields (like
the user erasing them) fail to remove the inputField_empty class (not
posting back, just have a onclick call that runs this validator
method).
Any suggestions?
