JQuery Validator. Single 'warning' message field update when user leaves a field.

Hi,
I have written a form with simple validation.
If the user submits, it highlights the fields with errors and displays a message at the bottom of the form indicating attention is needed. The message states the number of errors.

As a user corrects the field contents, the field is checked and if it complies with the validation is no longer highlighted. I would like to update the message at the bottom of the form to reflect that there is one less error than before.

A test set of the form:

	<head>
		<style type="text/css">
			select.error {
				border: 2px solid #FF0000;
			}
			
			input.error {
				border: 2px solid #FF0000;
			} 
			
			div.error {
				height: 23px;
				width: 500px;
				margin: 0px 0px 10px 120px;
				padding: 0px 0px 0px 30px;
				display: none;
				background-image: url(../images/icon-warning.png);
				background-repeat: no-repeat;
				background-position: left middle;
			}
			div.error p{
				font-weight: bold;
				line-height: 23px;
			}
			form dl {
				margin: 0px 0px 20px 0px;
				padding: 0px 0px 0px 0px;
				line-height: 24px;	
				width: 320px;
			}
			form dt {
				display: block;
				width: 120px;
				float: left;
				font-weight: bold;
			}
			form dd {
				display: block;
				margin: 0px 0px 2px 120px;
				padding: 0px;
			}
		</style>
		<script type="text/javascript" src="scripts/jquery.min.js"></script>
		<script type="text/javascript" src="scripts/jquery.validate.js"></script>
		<script>
			$().ready(function() {
				$("#form1").validate({
					errorElement: "label",
					invalidHandler: function(e, validator) {
						var errors = validator.numberOfInvalids();
						if (errors) {
							var message = errors == 1
							? 'There is ' + errors + ' field with an error. It has been highlighted above'
							: 'There are ' + errors + ' fields with errors. They have been highlighted above';
							$("div.error p").html(message);
							$("div.error").slideDown(300);
						}
					 else {
						$("div.error").hide();
						}
					},
					rules: {
						firstname: {required: true},
						lastname: {required: true},
						addrline1: {required: true},
						addrcity: {required: true},
						addrcounty: {required: true},
						addrpostcode: {required: true},
						countryid: {required: true},
						phoneprimary: {required: true},
						email: {
							required: true,
							email: true
						}
					},
					messages: {
						firstname: "",
						lastname: "",
						addrline1: "",
						addrcity: "",
						addrcounty: "",
						addrpostcode: "",
						countryid: "",
						phoneprimary: "",
						email: ""
					}
				});
			});
		</script>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
	<body>
						<form method="post" id="form1" >
							<dl>
								<dt>First Name</dt>
								<dd><input name="firstname" type="text" style="width: 12.1em;" maxlength="20" class="validate[required] text-input"/></dd>
								<dt>Last Name</dt>
								<dd><input name="lastname" type="text" style="width: 12.1em;" maxlength="20"/></dd>
							</dl>
							<div class="error">
								<p></p>
							</div>
							<dl>
								<dt>&nbsp;</dt>
								<dd><input name="submit" id="next" type="submit" class="button" value="Submit" /></dd>
							</dl>
						</form>
	</body>
</html>

Open in new window


Any help identifying how to code this would be greatly appreciated.

Kind Regards,
LVL 2
splantonAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ramyajanarthananCommented:
Do you want to show sum all the errors at bottom.
0
splantonAuthor Commented:
The form already does that. What I need to achieve is the updating of that message every time the user corrects a field.

Regards,
0
RobOwner (Aidellio)Commented:
I've added in the onkeyup function to test as the user is entering info:

http://jsfiddle.net/rjurd/XyHpd/1/

$().ready(function() {
    var validated = false;
  var validator = $("#form1").validate({
      onkeyup: function(element) {
          if(validated) {
              if(validator.form()) {
                  $("div.error").hide();
              }
          }
    },
    errorElement: "label",
    invalidHandler: function(e, validator) {
        validated = true;
      var errors = validator.numberOfInvalids();
      if (errors) {
        var message = (errors == 1) ? 'There is ' + errors + ' field with an error. It has been highlighted above' : 'There are ' + errors + ' fields with errors. They have been highlighted above';
        $("div.error p").html(message);
        $("div.error").slideDown(300);
      }
      else {
        $("div.error").hide();
      }
    },
    rules: {
      firstname: {required: true},
      lastname: {required: true},
      addrline1: {required: true},
      addrcity: {required: true},
      addrcounty: {required: true},
      addrpostcode: {required: true},
      countryid: {required: true},
      phoneprimary: {required: true},
      email: {
        required: true,
        email: true
      }
    },
    messages: {
      firstname: "",
      lastname: "",
      addrline1: "",
      addrcity: "",
      addrcounty: "",
      addrpostcode: "",
      countryid: "",
      phoneprimary: "",
      email: ""
    }
  });
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

splantonAuthor Commented:
Thanks for that. I was struggling with how best to trap the user action and act accordingly. I will test tomorrow. Thanks in advance.
Regards,
0
splantonAuthor Commented:
Tested that out and it resulted in the warning at the bottom of the screen not working at all.

Regards,
0
RobOwner (Aidellio)Commented:
Not sure what's gone wrong then. Does it work for you in the fiddle link? Works for me...
0
splantonAuthor Commented:
Fiddle just errors with unable to find $ etc... looks like it isn't picking up the jquery libraries. :(
I'll look at this again tomorrow with fresh eyes. :)
0
RobOwner (Aidellio)Commented:
Check out the screencast attached, just to show you how it's working for me.  What browser are you using?
2013-10-22-0541.swf
0
splantonAuthor Commented:
Hiya,
Finally got round to looking at this again (all sorts of fun at this end), anyway I got the fiddle working. Lord knows what happened before but it threw errors everywhere, but today it was behaving itself (I'm not complaining).

Tested the code, and it has nearly got what I need.
The onkeyup validation does not produce the error message until a submit has been done - correct. :)
Correcting fields changes the error message - correct. :)
However, if you do create a new error (by for instance deleting required field content) it now continues to validate onkeyup and reports the new error in the message rather than waiting for a fresh submit.

In short; new errors should only be shown on submit, already showing errors, and the error message at the bottom of the fieldset can be cleared/updated according on correction of the field. Once the fields have been corrected the message disappears and will only appear if a submit occurs and there is a fresh set of errors.

I can see from the code how you went about this and therefor testing for the visibility of the error message and unbinding the keyup functionality until the next submit would do it.

I am going to try this later and accept the coded solution supplied by tagit. Many thanks and once again sorry for the delay in getting back to you.

Regards,
0
RobOwner (Aidellio)Commented:
No problem - we're all busy but thanks for returning to the question :)

Glad to hear it now works even if you or I don't know why :)

You're right on the money with unbinding the keyup functionality, which is exactly how I would have gone about that.

Let me know if you have any issues.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.