Popup Jquery validate
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="resources/modules/firmabox/scripts/jquery-2.1.1.min.js"></script>
<script src="resources/modules/firmabox/scripts/jquery.validate.min.js"></script>
</head>
<body>
<form id="form1">
<div style="margin-bottom:20px;"><input name="Test1" id="Test1" type="text" class="required email" /></div>
<div style="margin-bottom:20px;"><input name="Test2" id="Test2" type="text" class="required" /></div>
<div style="margin-bottom:20px;"><input name="Test3" id="Test3" type="text" class="required" /></div>
<div style="margin-bottom:20px;"><input type="submit" value="Submit" /></div>
</form>
<style>
.arrow_validate {
position: absolute;
}
.errormessage {
padding: 10px;
border: 1px solid #c0c0c0;
z-index: 998;
background-color: #ffffff;
}
</style>
<script>
$(document).ready(function () {
$("#form1").validate({
errorElement: "div",
wrapper: "div",
showErrors: function (map, list) {
var focussed = document.activeElement;
$.each(list, function (index, error) {
$(error.element).css("border", "solid 1px red");
if (index == 0) {
var offset = $(error.element).offset();
var messageH = offset.top + $(error.element).height() + 20;
var imageH = offset.top + $(error.element).height();
$(error.element).next(".error_show").remove();
$(error.element).after("<div class='error_show errormessage' style='position: absolute; left: " + offset.left + "px; top: " + messageH + "px;'><div class='error' style='display: block;'>" + error.message + "</div><div style='position:absolute;top:-20px;left:" + offset.left + "px'><img alt='' src='resources/modules/firmabox/images/arrow_validate.png'></div></div>");
}
});
},
onkeyup: function (element) {
if($(element).valid())
{
$(element).next(".error_show").remove();
$(element).css("border", "solid 1px #cdcdce");
}
},
onfocusout:function(element)
{
if ($(element).valid()) {
$(element).next(".error_show").remove();
$(element).css("border", "solid 1px #cdcdce");
}
}
});
});
</script>
</body>
</html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="resources/modules/firmabox/scripts/jquery-2.1.1.min.js"></script>
<script src="resources/modules/firmabox/scripts/jquery.validate.min.js"></script>
</head>
<body>
<form id="form1">
<div style="margin-bottom:20px;"><input name="Test1" id="Test1" type="text" class="required email" /></div>
<div style="margin-bottom:20px;"><input name="Test2" id="Test2" type="text" class="required" /></div>
<div style="margin-bottom:20px;"><input name="Test3" id="Test3" type="text" class="required" /></div>
<div style="margin-bottom:20px;"><input type="submit" value="Submit" /></div>
</form>
<style>
.arrow_validate {
position: absolute;
}
.errormessage {
padding: 10px;
border: 1px solid #c0c0c0;
z-index: 998;
background-color: #ffffff;
}
</style>
<script>
$(document).ready(function () {
$("#form1").validate({
errorElement: "div",
wrapper: "div",
showErrors: function (map, list) {
var focussed = document.activeElement;
$.each(list, function (index, error) {
$(error.element).css("border", "solid 1px red");
if (index == 0) {
var offset = $(error.element).offset();
var messageH = offset.top + $(error.element).height() + 20;
var imageH = offset.top + $(error.element).height();
$(error.element).next(".error_show").remove();
$(error.element).after("<div class='error_show errormessage' style='position: absolute; left: " + offset.left + "px; top: " + messageH + "px;'><div class='error' style='display: block;'>" + error.message + "</div><div style='position:absolute;top:-20px;left:" + offset.left + "px'><img alt='' src='resources/modules/firmabox/images/arrow_validate.png'></div></div>");
}
});
},
onkeyup: function (element) {
if($(element).valid())
{
$(element).next(".error_show").remove();
$(element).css("border", "solid 1px #cdcdce");
}
},
onfocusout:function(element)
{
if ($(element).valid()) {
$(element).next(".error_show").remove();
$(element).css("border", "solid 1px #cdcdce");
}
}
});
});
</script>
</body>
</html>