I have a web page with 3 web forms, where the first two expect digital input and the last one may not be empty.
Here is the reduced and ready-to-run test case:
<html>
<head>
<style>
.invalid {
border: 2px solid #FF0000;
background-color: #FFCCCC;
}
</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function() {
//$('body').click(....)
$('#cl_txt, #mks_txt, #comment_txt').blur(function() {
$('#cl_txt, #mks_txt, #comment_txt').removeClass('invalid');
});
$('#mks_btn').click(function(e) {
if (! $('#mks_txt').val().match(/^[0-9]{6,}$/i)) {
$('#mks_txt').addClass('invalid');
e.preventDefault();
}
});
$('#cl_btn').click(function(e) {
if (! $('#cl_txt').val().match(/^[0-9]{6,}$/i)) {
$('#cl_txt').addClass('invalid');
e.preventDefault();
}
});
$('#comment_btn').click(function(e) {
if ($('#comment_txt').val().length < 2) {
$('#comment_txt').addClass('invalid');
e.preventDefault();
}
});
});
</script>
</head>
<body>
<table border=1>
<form><tr><th>MKS</th><td>
<input name="toggle_mks" id="mks_txt" type="text" size="10">
<input type="submit" id="mks_btn" value="Add MKS" class="toggle">
</td></tr>
<form><tr><th>CL</th><td>
<input name="toggle_cl" id="cl_txt" type="text" size="10">
<input type="submit" id="cl_btn" value="Add CL" class="toggle">
</td></tr></form>
<form><tr><th>Comments</th><td>
<textarea name="comment" id="comment_txt" rows="4" cols="40">
</textarea>
<input type="submit" id="comment_btn" value="Add comment" class="toggle">
</td></tr></form>
</table>
</body>
</html>
When invalid text has been entered and the corresponding submit button clicked, then I add the .invalid class to that text field or text area to make it appear red.
My problem is in handling situations, where the user changes her mind and decides not to submit that web form again. Instead she clicks into another web form or maybe just clicks somewhere in the web page.
In that case I would like the red .invalid class to be removed from the text elements #cl_txt, #mks_txt and #comment_txt again. But I don’t know how to arrange it. I’ve tried setting $(‘#cl_txt, #mks_txt, #comment_txt’).blur(….) but it never works consistently. I’ve tried $(‘body’).click(….) instead, but then form validation seems to break, the text fields are never painted red.
Any help please?
Try to use jQuery outside events plugin. Also, see the demo.
The main idea is that you delegate to element a
clickoutside(or evendblclickoutside) event and specify what should happen when it fires.Hope that will help.