I have the following ColdFusion page (below). I have jQueryTools validation running. It works perfectly fine from a traditional submit button, but I need it to work from the a href link, formatted as a button ( little further down in the code). I can't seem to figure out how to get the a href link that normally submits the form to fire an action that will cause the page to validateV BEFORE submitting the form.
My Javascript skills appear to be very basic. Any help would be greatly appreciated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><cfoutput>Welcome to#application.settings.meta_title#</cfoutput></title>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<link rel="stylesheet" href="/common/ext/jQuerytools/form.css" type="text/css" media="all" />
<style>
/* error container */
#errors {
background-color: #163356;
color: #fff;
width: 400px;
padding: 20px;
margin: 5px auto;
display: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
/* title */
#errors h2 {
margin: -5px 0;
color: yellow;
}
</style>
</head>
<body onLoad="self.focus();">
<h1>Pre Incident Plans Editor</h1>
<!--- BEGIN MAIN CONTENT AREA --->
<div id="main">
<div id="leftcol">
<form action="" method="POST" name="form2" id="form2">
<label for="addr_street">Address<br>
<input type="text" name="addr_number" id="Street Number" value="" style="width:50px;display:inline" placeholder="Number" required >
<input type="text" name="addr_street" id="Street Name" value="" size="32" placeholder="Street Name" style="display:inline" required />
<span class="field_instructions">Provide the street address that will match the CAD information</span> </label>
<label for="occ_name">
Occupancy Name<br>
<input type="text" name="occ_name" value="" style="width:100%" placeholder="Occupancy Name"/>
<input type="submit" name="button" id="button" value="Submit" class="button green medium">
</form>
</div>
<div id="rightcol">
<div id="publishingcontrols">
<h2>Publishing Controls</h2>
<div align="center"> <a href="#" onclick="document.getElementById('form2').submit();" class="button green large">Save</a> </div>
<div id="errors">
<h2>Please fix these first</h2>
</div>
</div>
</div>
<script>
// adds an effect called "wall" to the validator
$.tools.validator.addEffect("wall", function(errors, event) {
// get the message wall
var wall = $(this.getConf().container).fadeIn();
// remove all existing messages
wall.find("p").remove();
// add new ones
$.each(errors, function(index, error) {
wall.append(
"<p><strong>" +error.input.attr("id")+ "</strong> " +error.messages[0]+ "</p>"
);
});
// the effect does nothing when all inputs are valid
}, function(inputs) {
});
// initialize validator with the new effect
$("#form2").validator({
effect: 'wall',
container: '#errors',
// do not validate inputs when they are edited
errorInputEvent: null
// custom form submission logic
}).submit(function(e) {
});
</script>
</body>
</html>
Add this to fire validator without a submit button: