Hi folks,
I've not used any jQuery that traverses the DOM based on who is a child
or parent of who or what element was roommates with some other element
in college. But I think I've got a situation in which this sort of thing
will help.
A client gave me an html form built by some other company, and they
asked me to include field validation. Well that's fine, and actually
jQuery saved me about a hundred or so lines of code as it is (yay
jQuery!), I was so excited to use it in that manner. So the issue is
that, now I find out I was using the wrong version of the html file, and
rather than go and make all the changes to the html that I had to in
order to make my validation work, I think that jQuery can come to my
rescue again so that I don't have to do all that manually editing of the
original html.
This form is built out of several tables (don't shoot me! I didn't write
it... ;o)), and in order to keep with the sites current style of
displaying a validation error, I need to change the background and
border colors of the td that contained the element with the bad or
missing data.
Currently, I have the following function:
function ValidateForm(){
var TDID, ThisDataType = "";
var error = "";
var RequiredValuesAreMissing = false;
var InvalidDateValueFound = false;
var InvalidNumericValueFound = false;
$("input:text,input:hidden,input:checkbox,select,textarea").each(function(){
// is this field required?
$this = $(this);
ThisDataType = $this.attr("datatype");
//alert($this.attr("required"));
if($this.attr("required") == "true" && ($this.val() == "" ||
!$this.attr("checked"))){
//alert("required: " + $this.attr("required") + "\nvalue: "
+ $this.val() + "\nchecked: " + $this.attr("checked"));
RequiredValuesAreMissing = true;
TDID = $("#" + $this.attr("id") + "_td");
//dump(ParentTD);
TDID.removeClass("required");
TDID.addClass("stillrequired");
}
if(ThisDataType == "date" && $this.val() != "" &&
!CFJS.IsDate($this.val())){
InvalidDateValueFound = true;
TDID = $("#" + $this.attr("id") + "_td");
TDID.removeClass("required");
TDID.addClass("stillrequired");
}
else if (ThisDataType == "numeric" && $this.val() != "" &&
!CFJS.IsNumeric($this.val())){
//alert("value: " + $this.val() + "\n" +
CFJS.IsNumeric($this.val()));
InvalidNumericValueFound = true;
TDID = $("#" + $this.attr("id") + "_td");
TDID.removeClass("required");
TDID.addClass("stillrequired");
}
});
if(RequiredValuesAreMissing){
error += " * Some required information is missing.\n";
}
if(InvalidDateValueFound){
error += " * One or more date fields contain invalid
data.\n\tPlease use the format: mm/dd/yyyy\n";
}
if(InvalidNumericValueFound){
error += " * One or more numeric fields contain invalid
data.\n\tPlese don't use commas or decimal points in dollar amounts.\n";
}
if(error.length){
alert("Problems were found with your application:\n\n" + error);
return false;
}
return true;
}
This works and I'm relatively happy with it, but I had to come up with a
hokey way of highlighting the td in which lives the element with the bad
or missing data. Each element was faithfully given a unique id by whom
ever built the form, so I used that and put the name of the id followed
by "_td" so that I could match up the element with its parent td.
hokey, right? Yeah... I think so too. :o'
So, I figure there's got to be some super-cool way to loop over all the
necessary elements like I'm already doing, and when I find invalid data
I can change the colors on the td by realizing that the element is a
child of the td.... or something. I don't know that it really is a child
of the td, I'm just being hopeful.
Any thoughts on how I might accomplish this? Am I going down the right
track with the parent/child relationship idea? What are the seven secret
herbs and spices in Kentucky Fried Chicken? :op
Any help would be greatly appreciated.
Thanks,
Chris
--
http://cjordan.info
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
