RubyonRails中的JavaScript表单验证——让JS正常工作，但我应该把它放在哪里？_Javascript_Jquery_Ruby On Rails_Ruby_Validation

RubyonRails中的JavaScript表单验证——让JS正常工作，但我应该把它放在哪里？

javascript jquery ruby-on-rails ruby validation

RubyonRails中的JavaScript表单验证——让JS正常工作，但我应该把它放在哪里？,javascript,jquery,ruby-on-rails,ruby,validation,Javascript,Jquery,Ruby On Rails,Ruby,Validation,我用Ruby为研究生班的最后一个项目创建了一个房地产计算器。该项目将在24小时内（周一）完成，因此我非常感谢您的帮助该应用程序运行良好，但我需要使用JS添加客户端表单验证。我让JS在基本html表单中正常工作，但现在我需要将此JS功能应用到我们小组在Ruby on Rails环境中使用的表单中我不确定如何准确地合并这两个表单，以及将JS放在何处，以便init函数不会相互覆盖或导致错误。我假设所有的JS代码都在App/assets/javascript文件夹中，但我有点困惑JS如何正确链接到我

我用Ruby为研究生班的最后一个项目创建了一个房地产计算器。该项目将在24小时内（周一）完成，因此我非常感谢您的帮助

该应用程序运行良好，但我需要使用JS添加客户端表单验证。我让JS在基本html表单中正常工作，但现在我需要将此JS功能应用到我们小组在Ruby on Rails环境中使用的表单中

我不确定如何准确地合并这两个表单，以及将JS放在何处，以便init函数不会相互覆盖或导致错误。我假设所有的JS代码都在App/assets/javascript文件夹中，但我有点困惑JS如何正确链接到我创建的每个表单，因为我必须为三个表单执行此操作，因为我有三个实体：投资者实体、房地产实体和抵押贷款实体

我在本地为这三个实体中的每一个进行了所有JS验证，并在下面粘贴了一个抵押。当我在本地创建和测试JS验证时，它们都在各自独立的文件夹中，但在ruby git repo上，我认为所有JS代码都以某种方式共享同一个JS文件夹。。。我还不太了解RoR中的JS，但我假设assets/JS文件夹中的所有JS都是活动的

我很担心，因为如果我将所有JS验证代码都放在该文件夹中，或者将其合并到一个文件中，那么如果所有三个实体都使用相同的名称（“initPage”）调用一个函数，会不会发生冲突

所以。。。六羟甲基三聚氰胺六甲醚。。我想如果我将initPage（）重命名为3个单独的函数，如下所示：

初始投资公司（）
初始化页面（）
initPropertyPage（）

问题：

这是正确的方法还是它如何知道调用哪个initPage（）

传统html表单和Ruby表单如何优雅地合并？

我在下面粘贴了工作所需的所有JS代码，但实际上每个实体只有警告定义和一个函数initPage（）是不同的。我假设utils.js可以放在assets/js文件夹中，但是这三个实体的其他js代码呢

我是否（？）：

选项1）将其合并到一个custom.js文件中，并将initPage重命名为三个单独的函数。。或
选项2）将js文件分开，并根据调用的表单分别调用它们
选项3）选择其他方式…
选项4）在期末考试前一天，从短码头上长距离步行

谢谢

Ruby中的抵押贷款表单，我需要添加JS验证：（很抱歉使用Bootstrap的所有标记）

你可以试着在客户端进行一次lok验证。它不再被维护，但它应该使您的生活更轻松，而无需编写任何额外的js

我懒得读你所有的代码，但我建议你使用jQuery，这样你就可以删除所有这些废话。

<% 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-->

<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>

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;
}

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);
  }
}