【发布时间】:2014-11-19 02:03:20
【问题描述】:
我有以下 ColdFusion 页面(下)。我正在运行 jQueryTools 验证。它从传统的提交按钮工作得非常好,但我需要它从一个 href 链接工作,格式化为一个按钮(在代码中再往下一点)。我似乎无法弄清楚如何获取通常提交表单的 a href 链接以触发将导致页面在提交表单之前验证 V 的操作。
我的 Javascript 技能似乎非常基础。任何帮助将不胜感激。
<!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>
【问题讨论】:
标签: javascript jquery forms jquery-tools