RubyonRails中的JavaScript表单验证-让JS正常工作，但我该把它放在哪里
JavaScript form validation in Ruby on Rails - Got JS working, but where do I put it?
我在研究生院的最后一堂课上用Ruby创建了一个房地产计算器。这个项目将在大约24小时后（星期一）完成，所以我真的很感激你的帮助。
该应用程序运行良好，但我需要使用JS添加客户端表单验证。我让JS像我希望的那样在基本的html表单中工作，但现在我需要将JS功能应用于我们团队在RubyonRails环境中使用的表单。
我不知道如何准确地合并这两个表单，以及将JS放在哪里，这样init函数就不会相互覆盖或导致错误。我假设所有JS代码都在App/assets/javascript文件夹中，但我对JS如何正确链接到我正在创建的每个表单有点困惑，因为我必须为三个表单这样做，因为我有三个实体：投资者实体、房地产实体和抵押贷款实体。
我在本地为这三个实体中的每一个进行了所有JS验证，并粘贴了下面用于抵押贷款的。当我在本地创建和测试JS验证时，它们都在各自独立的文件夹中，但在ruby git repo上，我认为所有JS代码都共享同一个JS文件夹。。。我对RoR中的JS还不太了解，但我认为assets/JS文件夹中的所有JS都是活动的。
我很担心，因为如果我把所有的JS验证代码都放在那个文件夹中，或者把它合并到一个文件中，那么如果这三个实体都在调用一个同名的函数（"initPage"），会不会发生冲突？
所以。。。嗯。我想如果我只是将这个initPage（）重命名为3个单独的函数，如下所示：
- initInvestorPage（）
- initMortgagePage（）
- initPropertyPage（）
我在下面粘贴了工作所需的所有JS代码，但实际上只有警告定义和一个函数initPage（）对于每个实体是不同的。我假设utils.js可以放在assets/js文件夹中，但这三个实体的其他js代码呢？
我（？）：
- 选项1）将其全部合并到一个custom.js文件中，并将initPage重命名为三个独立的函数。。或
- 选项2）将js文件分开，并根据调用的表单以某种方式分别调用它们
- 选项3）采用其他方式…
- 选项4）在决赛周的前一天从一个短码头上走很长一段路
Thx！！
Ruby中的Mortgage表单，我需要添加JS验证：（很抱歉使用Bootstrap带来的所有标记）
<% provide(:title, 'Create mortgage') %>
<div class="container">
<div class="page-header">
<h1>Create mortgage</h1>
</div>
<div class="row">
<%= render 'layouts/sidebar' %>
<div class="col-md-9">
<%= form_for(@mortgage) do |f| %>
<%= render 'shared/error_messages', object: f.object %>
<div class="col-md-12">
<div class="col-md-6">
<fieldset class="property_create_group">
<label for="mortgage_name">Mortgage name</label>
<%= f.text_field :name, :class => "form-control" %>
</fieldset>
</div>
<div class="col-md-2 clear-both1">
<fieldset class="property_create_group">
<label for="mortgage_amount">Amount</label>
<%= f.number_field :amount, :class => "form-control" %>
</fieldset>
</div>
<div class="col-md-2">
<fieldset class="property_create_group">
<label for="mortgage_terms">Term (yr)</label>
<%= f.number_field :terms, :class => "form-control" %>
</fieldset>
</div>
<div class="col-md-2">
<fieldset class="property_create_group">
<label for="mortgage_interestRate">Interest</label>
<%= f.number_field :interestRate, :class => "form-control" %>
</fieldset>
</div>
</div>
<div class="col-md-4 col-md-offset-1">
<%= f.submit "Create mortgage", class: "btn btn-large btn-success" %>
</div>
<% end %>
</div><!-- /col-md-9-->
</div><!-- /row-->
</div><!-- /container-->
Mortgage.html:
<head>
<link rel="stylesheet" type="text/css" href="css/forms.css" />
<script src="scripts/utils.js" type="text/javascript"></script>
<script src="scripts/mortgage.js" type="text/javascript"></script>
</head>
<body>
<div id="content">
<form action="#" method="post">
<fieldset><label for="mname">Mortgage name</label>
<input name="mname" id="mname" type="text" /></fieldset>
<fieldset><label for="amount">Amount</label>
<input name="amount" id="amount" type="text" /></fieldset>
<fieldset><label for="terms">Terms</label>
<input name="terms" id="terms" type="text" /></fieldset>
<fieldset><label for="interestRate">Interest Rate</label>
<input name="interestRate" id="interestRate" type="text" /></fieldset>
<input type="submit" id="createMortgage" value="Create Mortgage" disabled="disabled" />
</fieldset>
</form>
</div>
</body>
</html>
Mortgage.js:
window.onload = initPage;
var warnings = {
"mname" : {
"required": "Please enter a name for your mortgage.",
"err" : 0
},
"amount" : {
"required": "Please enter the amount of the mortgage.",
"numbers" : "Only numbers are allowed in the mortgage amount.",
"err" : 0
},
"terms" : {
"required": "Please enter the terms (in years) of the mortgage. ",
"numbers" : "Only numbers (in years) can be given for the mortgage terms.",
"err" : 0
},
"interestRate" : {
"required": "Please enter the amount of the interest rate.",
"numbers" : "Only numbers are allowed in the interest rate.",
"err" : 0
}
}
function initPage() {
addEventHandler(document.getElementById("mname"), "blur", fieldIsFilled);
addEventHandler(document.getElementById("amount"), "blur", fieldIsFilled);
addEventHandler(document.getElementById("amount"), "blur", fieldIsNumbers);
addEventHandler(document.getElementById("terms"), "blur", fieldIsFilled);
addEventHandler(document.getElementById("terms"), "blur", fieldIsNumbers);
addEventHandler(document.getElementById("interestRate"), "blur", fieldIsFilled);
addEventHandler(document.getElementById("interestRate"), "blur", fieldIsNumbers);
}
function fieldIsFilled(e) {
var me = getActivatedObject(e);
if (me.value == "") {
warn(me, "required");
} else {
unwarn(me, "required");
}
}
function fieldIsLetters(e) {
var me = getActivatedObject(e);
var nonAlphaChars = /[^a-zA-Z]/;
if (nonAlphaChars.test(me.value)) {
warn(me, "letters");
} else {
unwarn(me, "letters");
}
}
function fieldIsNumbers(e) {
var me = getActivatedObject(e);
var nonNumericChars = /[^0-9]/;
if (nonNumericChars.test(me.value)) {
warn(me, "numbers");
} else {
unwarn(me, "numbers");
}
}
function warn(field, warningType) {
var parentNode = field.parentNode;
var warning = eval('warnings.' + field.id + '.' + warningType);
if (parentNode.getElementsByTagName('p').length == 0) {
var p = document.createElement('p');
field.parentNode.appendChild(p);
var warningNode = document.createTextNode(warning);
p.appendChild(warningNode);
} else {
var p = parentNode.getElementsByTagName('p')[0];
p.childNodes[0].nodeValue = warning;
}
document.getElementById("createMortgage").disabled = true;
}
function unwarn(field, warningType) {
if (field.parentNode.getElementsByTagName("p").length > 0) {
var p = field.parentNode.getElementsByTagName("p")[0];
var currentWarning = p.childNodes[0].nodeValue;
var warning = eval('warnings.' + field.id + '.' + warningType);
if (currentWarning == warning) {
field.parentNode.removeChild(p);
}
}
var fieldsets =
document.getElementById("content").getElementsByTagName("fieldset");
for (var i=0; i<fieldsets.length; i++) {
var fieldWarnings = fieldsets[i].getElementsByTagName("p").length;
if (fieldWarnings > 0) {
document.getElementById("createMortgage").disabled = true;
return;
}
}
document.getElementById("createMortgage").disabled = false;
}
Utils.js:
function createRequest() {
try {
request = new XMLHttpRequest();
} catch (tryMS) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (otherMS) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = null;
}
}
}
return request;
}
function getActivatedObject(e) {
var obj;
if (!e) {
// early version of IE
obj = window.event.srcElement;
} else if (e.srcElement) {
// IE 7 or later
obj = e.srcElement;
} else {
// DOM Level 2 browser
obj = e.target;
}
return obj;
}
function addEventHandler(obj, eventName, handler) {
if (document.attachEvent) {
obj.attachEvent("on" + eventName, handler);
} else if (document.addEventListener) {
obj.addEventListener(eventName, handler, false);
}
}
您可以尝试在client_side_validationgem上使用lok。它不再被维护，但它应该让你的生活更轻松，而不需要写任何额外的js。https://github.com/bcardarella/client_side_validations
相关文章：
- 在哪里使用名为“;冻结”;
- Ember.js-接口状态应该存储在哪里
- 在Redux中，我应该在哪里编写复杂的异步流
- 在哪里可以学习ECMAScript标准中尚未包含的JavaScript功能
- 在哪里可以找到RXUI Javascript'时间飞逝'实例
- Redux应用程序结构-在哪里放置服务/业务逻辑
- 在哪里可以找到'项目'在plothover函数中
- Javascript-在哪里放置常量，全局或本地
- Sequelize:这些方法应该驻留在哪里
- AJAX更新面板不;t工作.请帮我找出我错在哪里.
- Redux - 繁重的工作应该在哪里发生 - 化简器，动作，容器或表示组件
- 我在哪里放置此JS代码以使其工作
- 我在哪里可以找到 socket.io 1.0的工作示例
- 在哪里放置这段JavaScript代码才能正常工作
- JavaScript函数中的相邻圆括号是如何工作的，这在哪里有记录
- 我应该在哪里添加JS事件，使我的链接工作
- 两个代码块单独工作，而不是一起工作，我在哪里出错了
- $.browser.msie 在 jQuery 1.9 中不再工作.替代品在哪里
- 我在哪里错在这个php代码，而选择选项工作
- 在哪里可以找到一些关于新的canvas HTML元素如何工作的好信息
