【问题标题】:Need help getting a jQueryTools Validation script to fire without a submit button需要帮助让 jQueryTools 验证脚本在没有提交按钮的情况下触发
【发布时间】: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


    【解决方案1】:

    将此添加到没有提交按钮的触发验证器:

    var $validator= $("#form2").data("validator");
    $validator.checkValidity();
    

    【讨论】:

    • 那是我不清楚的地方。它被添加到哪里?
    • 将此添加到要触发验证的函数中
    猜你喜欢
    • 2017-07-13
    • 2023-03-21
    • 2012-04-18
    • 2014-05-11
    • 2019-09-26
    • 2013-02-24
    • 2011-10-23
    • 1970-01-01
    相关资源
    最近更新 更多