[jQuery] Delayed activation of "required" test with jquery.validate.js
Using the current version of Jörn Zaefferer's jquery.validate.js...
The proof-of-concept script code and markup below (pasted in and simplified
somewhat) seems to work as it says on the tin. Error notifications of
various kinds appear in the specified span element when undesired data entry
is perpetrated.
Except... the desired interactive display of the "required" notice only
appears after "activating" a field by putting something in it and then
coming back to it and clearing the content. I can see the rationale in
certain circumstances for not notifying about an empty required field when
the user has simply tabbed through it. But here's what happens...
If I load this page, locate the cursor in the first (Title) field, then hit
tab; no "required" notice is displayed. If I enter something in the Title
field, tab, return, empty the field, _then_ I get a "required" notice. But
who's going to do that?
The more likely behavior I'd like to catch in interactive mode (i.e. 'event:
"blur"') is tabbing through a required field. And the current default
behavior seems to defeat the utility of the instant response behavior that
'event: "blur"' provides.
Is there an option to "activate" the "required" option for when the user
tabs through a required field? Or am I missing something?
And yes, I know that the tabbed-through field will be flagged and focussed
when the user hits 'Submit'. I'd just like to know if this
ignore-tab-throughs behavior for required fields is configurable.
Or has experience taught that it's better not to go there?
Thanks in advance for enduring this longish post about a fairly minor
behavior issue -- and apologies if I have missed something obvious in my
Googling and doc and mail archive reading.
Code follows...
<script type="text/javascript">
$().ready(function() {
$("#NewSolution").validate({
debug: true,
event: "blur",
rules: {
Title: { required: true,
minLength: 10,
maxLength: 50, },
Description: "required",
},
messages: {
Title: {
required: "Please supply a title.<br />",
minLength: "At least 10 chrs long, please.<br />",
maxLength: "Less than 50 chrs please.<br />"
},
Description: {
required: "Please supply a description.<br />",
},
},
errorPlacement: function(error, element) {
error.appendTo( element.parent("td").find("span.ErrMsg") );
},
})
})
</script>
And here's the markup adapted from what the page design folks gave me to
work with (you'll notice I'm using Savant templating):
<form name="NewSolution" id="NewSolution" method="post"
action="post_solution.php" enctype="multipart/form-data">
<input type=hidden name="ArticleID" value="<?= $this->ArticleID ?>">
<p class="subTitle">Submit a Solution:
<table class="text">
<tr>
<td align="right" valign="top">
Title
</td>
<td>
<input type="text" id="Title" name="Title" size="50"
maxlength="50" class="inputText"
value="<?= $this->Title ?>">(50 characters or less)
<br />
</td>
</tr>
<tr>
<td align="left" valign="top" colspan="2">
Description (250 words or less)
</td>
</tr>
<tr>
<td> </td>
<td>
<textarea class="inputText" id="Description"
name="Description" rows="6" cols="65">
<?= $this->Description ?>
</textarea>
</td>
</tr>
etc. etc. etc.
</table>
</form>
--
View this message in context: http://www.nabble.com/Delayed-activation-of-%22required%22-test-with-jquery.validate.js-tf4256620s15494.html#a12113813
Sent from the JQuery mailing list archive at Nabble.com.
Topic Participants
dvergin
Jörn Zaefferer