Solved

Jquery validation plugin

Posted on 2010-11-29
7
963 Views
Last Modified: 2012-05-10
Hey,

i came across this jquery validation and was wondering if i could get a few quick pointers.

i am trying to show my own customizable error message when there is an invalid field triggered on submit. i have attached the code i am using below.

Thanks!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
	debug: true,
	success: "valid"
});;
</script>

  <script>
  $(document).ready(function(){
	$('.validation-summary').hide();
    $("#myform").validate({
  rules: {
    email: {
      required: true,
      email: true
    }
  }
});
  });
  </script>
  <style>#email { margin-left: .5em; float: left; }
  	#email, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; }
	br { clear: both; }
	input { border: 1px solid black; margin-bottom: .5em;  }
	input.error { border: 1px solid red; }
	label.error {
		background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat;
		padding-left: 16px;
		margin-left: .3em;
	}
	label.valid {
		background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
		display: block;
		width: 16px;
		height: 16px;
	}
</style>
</head>
<body>
  
<form id="myform">
<div class="validation-summary">
    <span class="icon-alert"></span><span class="headline">Whoops!</span>
    <p>Please revise the areas with red messages below to continue.</p>
</div>

  <label for="email">Required, email: </label>
  <input class="left" id="email" name="email" />
  <br/>
  <input type="submit" value="Validate!" />
</form>

</body>
</html>

Open in new window

0
Comment
Question by:JMRFan4Life
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
7 Comments
 
LVL 53

Expert Comment

by:Huseyin KAHRAMAN
ID: 34233049
use these to customize

      messages: {
            required: "This field is required.",
            remote: "Please fix this field.",
            email: "Please enter a valid email address.",
            url: "Please enter a valid URL.",
            date: "Please enter a valid date.",
            dateISO: "Please enter a valid date (ISO).",
            dateDE: "Bitte geben Sie ein gültiges Datum ein.",
            number: "Please enter a valid number.",
            numberDE: "Bitte geben Sie eine Nummer ein.",
            digits: "Please enter only digits",
            creditcard: "Please enter a valid credit card number.",
            equalTo: "Please enter the same value again.",
            accept: "Please enter a value with a valid extension.",
            maxlength: $.format("Please enter no more than {0} characters."),
            minlength: $.format("Please enter at least {0} characters."),
            rangelength: $.format("Please enter a value between {0} and {1} characters long."),
            range: $.format("Please enter a value between {0} and {1}."),
            max: $.format("Please enter a value less than or equal to {0}."),
            min: $.format("Please enter a value greater than or equal to {0}.")
      },
$(document).ready(function(){
	$('.validation-summary').hide();
    $("#myform").validate({
  rules: {
    email: {
      required: true,
      email: true,
      messages: {
      required: "HK: This field is required.",
      email: "HK: Email is required!"
      }
    }
  }
});
  });

Open in new window

0
 
LVL 16

Expert Comment

by:jmatix
ID: 34233142
Add messages also to your validate() call as below:
<script>
$(document).ready(function(){
$('.validation-summary').hide();
$("#myform").validate({
rules: {
email: {
  required: true,
  email: true
}
},
messages: {
	email: {
	  required: "This field is kind of required.",
	  email: "Invalid format. Should be xyz@abc.com"
	}
}
});
});
</script>

Open in new window

0
 

Author Comment

by:JMRFan4Life
ID: 34233586
is there a way to trigger this div to show on validate.

<div class="validation-summary">
    <span class="icon-alert"></span><span class="headline">Whoops!</span>
    <p>Please revise the areas with red messages below to continue.</p>
</div>
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 16

Expert Comment

by:jmatix
ID: 34233707
Add an invalidHandler as:
<script>
  $(document).ready(function(){
	$('.validation-summary').hide();
    $("#myform").validate({
    invalidHandler: function(form, validator) {
      var errors = validator.numberOfInvalids();
	  alert(errors);
      if (errors) {
        $(".validation-summary").show();
      } else {
        $(".validation-summary").hide();
      }
    },
  rules: {
    email: {
      required: true,
      email: true
    }
  },
	messages: {
		email: {
		required: "This field is kind of required.",
		email: "Invalid format. Should be xyz@abc.com"
		}
	}
});

Open in new window

0
 
LVL 53

Expert Comment

by:Huseyin KAHRAMAN
ID: 34234247
here it is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
	debug: true,
	success: "valid"
});;
</script>

  <script>
  function chkForm(){
    document.getElementById("divSummary").style.display = (!$("#myform").valid())? "" : "none";
  };
  $(document).ready(function(){
	$('.validation-summary').hide();

  $("#myform").validate({
  rules: {
    email: {
      required: true,
      email: true
    },
    nick: {
      required: true
    }
  },
  messages: {
    email:{
      required: "(email) : This field is required.",
      email: "(email) : Email is required!"
    },
    nick:{
      required: "(nick): This field is required."
    }
  }
	});
	
  });
  </script>
  <style>#email { margin-left: .5em; float: left; }
  	#email, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; }
	br { clear: both; }
	input { border: 1px solid black; margin-bottom: .5em;  }
	input.error { border: 1px solid red; }
	label.error {
		background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat;
		padding-left: 16px;
		margin-left: .3em;
	}
	label.valid {
		background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
		display: block;
		width: 16px;
		height: 16px;
	}
</style>
</head>
<body>
  
<form id="myform" onSubmit="chkForm()">
<div class="validation-summary" id="divSummary">
    <span class="icon-alert"></span><span class="headline">Whoops!</span>
    <p>Please revise the areas with red messages below to continue.</p>
</div>

  <label for="nick">Required, nickname: </label>
  <input class="left" id="nick" name="nick" />
  <br/>
  <label for="email">Required, email: </label>
  <input class="left" id="email" name="email" />
  <br/>
  <input type="submit" value="Validate!" />
</form>

</body>
</html>

Open in new window

0
 

Author Comment

by:JMRFan4Life
ID: 34249392
the validation box is not being hidden after valid answers are entered for both examples above?!!
0
 
LVL 16

Accepted Solution

by:
jmatix earned 500 total points
ID: 34250062
Change:

jQuery.validator.setDefaults({
      debug: true,
      success: "valid"
});

To:

jQuery.validator.setDefaults({
      debug: true,
      success: "valid",
      unhighlight: function(element, errorClass, validClass){
            $(element).removeClass(errorClass).addClass(validClass);
            $('.validation-summary').hide();
      }

});
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question