> The select gets it's value from the selected child option. Perhaps that's why I can't get validation to work!
> My advice would be to use the Jorn's plugin Believe me, I've tried. I worked with it every way I could think of to disable the default "onSubmit" event and cause validation only "onblur", but I couldn't make it work. I haven't heard anything from Jorn, but if you or anyone knows how to make the validation occur only onblur, please let me know. I don't need or want onSubmit at all...I have server-side validation that will take care of it once it's submitted. Rick > -----Original Message----- > From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On > Behalf Of Karl Rudd > Sent: Monday, December 22, 2008 11:37 PM > To: jquery-en@googlegroups.com > Subject: [jQuery] Re: How can I generalize this code for all values? > > > Not quite sure what you're asking. Why would you try to set the > select's value? The select gets it's value from the selected child > option. > > My advice would be to use the Jorn's plugin ( > http://docs.jquery.com/Plugins/Validation ). From what I can see it > seems to do validation on blur by default. > > Karl Rudd > > On Tue, Dec 23, 2008 at 2:54 PM, Rick Faircloth > <r...@whitestonemedia.com> wrote: > > > > D'oh! I can't believe it was that simple! > > And I read everything I could find, including the docs on selectors. > > (Should have read it twice, I guess...) > > > > Anyway, question, Karl, et al... > > > > How can I validate a select input? > > > > I've tried setting the default select value to "" > > which I thought would be equivalent to value.length == 0, > > but nothing's happening with the error message. > > Others are working fine. > > > > Suggestions? > > > > Thanks, > > > > Rick > > > > > > > >> -----Original Message----- > >> From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On > >> Behalf Of Karl Rudd > >> Sent: Monday, December 22, 2008 10:43 PM > >> To: jquery-en@googlegroups.com > >> Subject: [jQuery] Re: How can I generalize this code for all values? > >> > >> > >> From http://docs.jquery.com/Selectors (Forms section): > >> > >> :input > >> Matches all input, textarea, select and button elements. > >> > >> To select all Form elements with a "required" class: > >> > >> $(':input.required') > >> > >> Karl Rudd > >> > >> > >> On Tue, Dec 23, 2008 at 2:39 PM, Rick Faircloth > >> <r...@whitestonemedia.com> wrote: > >> > > >> > 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 > >> > > >> > > > > >
