I’m testing the JQUery Tools and trying to get a modal form working with their validation setup.
I have a CSS issue in that the error messages from validation don’t disappear on closing the modal form.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jQuery modal form test</title>
<!-- include the Tools -->
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<!--- add styles --->
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/demos/validator/css/form.css"/>
<style>
.modal {
background-color:#fff;
display:none;
width:450px;
padding:15px;
text-align:left;
border:2px solid #333;
opacity:0.8;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-moz-box-shadow: 0 0 50px #ccc;
-webkit-box-shadow: 0 0 50px #ccc;
}
.modal h2 {
background:url(/img/global/info.png) 0 50% no-repeat;
margin:0px;
padding:10px 0 10px 45px;
border-bottom:1px solid #333;
font-size:20px;
}
/* error message */
.error {
height:15px;
background-color:#FFFE36;
font-size:11px;
border:1px solid #E1E16D;
padding:4px 10px;
color:#000;
display:none;
z-index: 10000;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius-bottomleft:0;
-moz-border-radius-topleft:0;
-webkit-border-bottom-left-radius:0;
-webkit-border-top-left-radius:0;
-moz-box-shadow:0 0 6px #ddd;
-webkit-box-shadow:0 0 6px #ddd;
}
</style>
</head>
<body>
<p>
<div id="loginMenu">
<a href class="modalInput" rel="#register">Register</a>
</div>
</p>
<div class="modal" id="register">
<!-- signup form-->
<form id="myform" autocomplete="off" method="get" action="" novalidate="novalidate">
<fieldset>
<p>
<label>email *</label>
<input type="email" name="email" placeholder="email..." required="required"/></p>
<p>
<label>username *</label>
<input type="text" name="username" placeholder="username..." pattern="[a-zA-Z]{5,}" required="required"/>
</p>
<p>
<label>password *</label>
<input type="text" name="password" placeholder="password..." />
</p>
<p>
<label>confirm password *</label>
<input type="text" name="password2" placeholder="password..." />
</p>
<p>
<button type="submit">Sign Up</button>
<button type="button" class="close"> Cancel </button>
</p>
</fieldset>
</form>
</div>
<script>
$(document).ready(function() {
var triggers = $(".modalInput").overlay({
// some mask tweaks suitable for modal dialogs
mask: {
color: '#ebecff',
loadSpeed: 200,
opacity: 0.9
},
closeOnClick: false
});
// initialize validator and add a custom form submission logic
$("#myform").validator().submit(function(e) {
var form = $(this);
// client-side validation OK.
if (!e.isDefaultPrevented()) {
// submit with AJAX
$.getJSON("processSignup.cfm?" + form.serialize(), function(json) {
// everything is ok. (server returned true)
if (json === true) {
// close the overlay
triggers.eq(0).overlay().close();
$("#loginMenu").html("<a href='logout.cfm'>Log out</a>");
// server-side validation failed. use invalidate() to show errors
} else {
form.data("validator").invalidate(json);
}
});
// prevent default form submission logic
e.preventDefault();
}
});
});
</script>
</body>
</html>
HOw do I get the error messages to disappear (and preferably reset) when I close the modal form?
Change your trigger variable to this: