How can this:
// all the required text fields
var $required = $('input.required:text');
be expanded to include 'input.required:select' ?
I tried all the variations I could think of, including:
$('input.required:text', 'input.required:select')
but that, and every other variation, throws an error.
What's the syntax for specifying various types of required inputs?
Rick
> -----Original Message-----
> From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
> Behalf Of Kean
> Sent: Monday, December 22, 2008 8:26 PM
> To: jQuery (English)
> Subject: [jQuery] Re: How can I generalize this code for all values?
>
>
> try this, it accounts for checking all the required fields to see if
> they are blank and disable
>
> jQuery(function(){
>
> // all the required text fields
> var $required = $('input.required:text');
>
> // function checks for blank input
> var isBlank = function(str) {
> return $.trim(str).length==0
> }
>
> // function checks if other required fields are blank
> var checkAllRequired = function () {
> var allFilled = true;
> $required.each(function() {
> if (isBlank(this.value))
> allFilled = false;
> });
> return allFilled;
> }
>
> // initially disable or enable the submit button
> $("#submit").attr('disabled', checkAllRequired() ? null :
> "disabled");
>
>
> // same as $required each blur
> $required.blur(function() {
> // checks if current field is blank
> if (isBlank(this.value))
> $("#" + this.id + "_error").fadeIn(500);
> else
> $("#" + this.id + "_error").fadeOut(500);
>
> $("#submit").attr('disabled', checkAllRequired() ? null :
> "disabled");
>
> });
>
> });
>
> On Dec 22, 3:54 pm, "Rick Faircloth" <r...@whitestonemedia.com> wrote:
> > Ok...after a lot of experimentation, I've got a solution
> > that's working to the point that I've attempted to implement it.
> >
> > Here's the code:
> >
> > $(document).ready(function() {
> >
> > $('input:text.required').each(function() {
> > $(this).blur(function() {
> > var val = (this.value.length);
> > if (val == 0)
> > { $("#" + this.id + "_error").fadeIn(500);
> > $('#submit').attr('disabled', 'disabled'); }
> > else
> > { $("#" + this.id + "_error").fadeOut(500);
> > $('#submit').removeAttr('disabled'); };
> >
> > $('input:text.required').each(function() {
> > var val = (this.value.length);
> > if (val == 0)
> > { $('#submit').attr('disabled', 'disabled'); }
> > });
> >
> > });
> > });
> >
> > });
> >
> > This code allows for the following:
> >
> > - on blur of any text input with class 'required' the length is checked
> > - if the length of the required field is > 0, then the error message is
> > shown
> > and the submit button for the form is disabled
> >
> > - the second half of the code checks all the text inputs with class
> > 'required'
> > - if the length of any of the required text fields is 0, then the submit
> > button is disabled
> >
> > What I need to do now:
> >
> > - Allow for other type of inputs to be checked on blur, etc., such as
> > selects
> > (Later, I'll add other types of validation, such as numeric, etc.)
> >
> > Question:
> >
> > - How do I modify ('input:text.required') to accommodate other types of
> > required inputs?
> > - I tried ('input:text.required, input:select.required') and
> > ('input:text.required', 'input:select.required') but that didn't
> > work
> >
> > Clues or hints?
> >
> > Thanks,
> >
> > Rick
> >
> > > -----Original Message-----
> > > From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
> > > Behalf Of MorningZ
> > > Sent: Monday, December 22, 2008 2:40 PM
> > > To: jQuery (English)
> > > Subject: [jQuery] Re: How can I generalize this code for all values?
> >
> > > Try this change
> >
> > > $("#submit").attr('disabled', (val == "") ? "disabled" : null);
> >
> > > If that doesn't work, then perhaps:
> >
> > > if (val == "") {
> > > $("#" + this.id + "_error").fadeIn(500);
> > > $("#submit").attr("disabled", "disabled");
> > > }
> > > else {
> > > $("#" + this.id + "_error").fadeOut(500);
> > > $("#submit").removeAttr("disabled");
> > > }
> >
> > > On Dec 22, 2:21 pm, "Rick Faircloth" <r...@whitestonemedia.com> wrote:
> > > > 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
