[jQuery] validates after blur
I've been trying to figure out how to add validation to jquery.autobox
and it works except if I have more than one on the page it only
validates the first one on submit though it will validate all other
fields around it ! I can get it to validate the remaining autobox
inputs if I give them focus and then take it a way that said I could
get around the problem by setting focus on inputs then setting focus
on something else but that's just sloppy coding.
here is the html before it is submited
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
</head>
<body>
<form id="myform" action="commit_album" method="post" name="myform">
<ul class="ui-sortable" id="imagelist">
<li class="info" id="li1">
<label class="categorylabel accordion" id="label1"><img src="/
secure/img/accordionopen.gif" alt="toggle accordion">Image 1:</label>
<div class="block" id="block1">
<div class="imagecontainer" id="imagecontainer1">
<img src="/img/image_854_1.JPG">
<p id="remove1" class="remove" name="1">
Remove
</div>
<div class="infocontainer" id="infocontainer1">
<ul id="ul1">
<li>
<label>Photographer</label><input name="photographer1"
class="required" type="text">
</li>
<li>
<label>File Title</label><input id="title1" name="title1"
class="required" type="text">
</li>
<li>
<label>File Description/Caption</label>
<textarea name="caption1" rows="5" cols="40"
class="textfield">
</textarea>
</li>
<li>
<label>Embargo date</label><input id="embargodate1"
name="embargodate1" class="required" type="text"><img src="/secure/img/
cal.gif">
</li>
<li>
<label for="tags1" class="accordion">Tags</label>
<ul>
<li>
<input style="display: none;" id="tags1" class="autobox"
type="text">
<ul class="autobox-hldr">
<li class="autobox-input">
<input class="tag_check" id="abi0" type="text">
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li class="info" id="li2">
<label class="categorylabel accordion" id="label2"><img src="/
secure/img/accordionopen.gif" alt="toggle accordion">Image 2:</label>
<div class="block" id="block2">
<div class="imagecontainer" id="imagecontainer2">
<img src="/img/063shell.jpg">
<p id="remove2" class="remove" name="2">
Remove
</div>
<div class="infocontainer" id="infocontainer2">
<ul id="ul2">
<li>
<label>Photographer</label><input name="photographer2"
class="required" type="text">
</li>
<li>
<label>File Title</label><input id="title2" name="title2"
class="required" type="text">
</li>
<li>
<label>File Description/Caption</label>
<textarea name="caption2" rows="5" cols="40"
class="textfield">
</textarea>
</li>
<li>
<label>Embargo date</label><input id="embargodate2"
name="embargodate2" class="required" type="text"><img src="/secure/img/
cal.gif">
</li>
<li>
<label for="tags2" class="accordion">Tags</label>
<ul>
<li>
<input style="display: none;" id="tags2" class="autobox"
type="text">
<ul class="autobox-hldr">
<li class="autobox-input">
<input class="tag_check" id="abi1" type="text">
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
</form>
</body>
</html>
and the query that makes it all happen
$(document).ready(function(){
function apply_autobox(objid) {
$(objid).autobox({
list: suggestions,
match: function(typed) {
this.typed = typed;
this.pre_match = this.text;
this.match = this.post_match = '';
if (!this.ajax && !typed || typed.length === 0) {
return true;
}
var match_at = this.text.search(new RegExp("\\b" + typed,
"i"));
if (match_at != -1) {
this.pre_match = this.text.slice(0, match_at);
this.match = this.text.slice(match_at, match_at +
typed.length);
this.post_match = this.text.slice(match_at +
typed.length);
return true;
}
return false;
},
insertText: function(obj) {
return obj.text;
},
templateText: "<li><%= pre_match %><span class='matching' ><%=
match %></span><%= post_match %></li>",
});
};
function add_validation_methods() {
jQuery.validator.addMethod("tags", function(value,element) {
return this.optional(element) || value.match(/^[a-zA-Z0-9,!\$ ]+
$/);
}, "Tags can consist of letters, numbers. Tags to be hidden from
Live2 should start with a \"!\" Anything else is not allowed.");
jQuery.validator.addMethod("tag_exists", function(value, element) {
return $(element).parent().prev().attr("class") == "bit-box";
}, "This field is required to contain tags.");
jQuery.validator.addClassRules({
tag_check:{
tag_exists: true,
tags: true
}
});
};
add_validation_methods();
apply_autobox("#tags" + id);
$("li .autobox-input :input").addClass("tag_check");
});
any help would be greatly appreciated
Mean Mike