• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1014
  • Last Modified:

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,
0
splanton
Asked:
splanton
  • 5
  • 4
1 Solution
 
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
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now