时间戳

首页 > 解决方案 > 输入更改事件调用错误的函数，但记录正确的输入事件

javascript - 输入更改事件调用错误的函数，但记录正确的输入事件

问题描述

我有一个包含账单和运输信息的订单，并希望使用各自的功能验证每个输入。

除了一个之外，所有输入都调用了它们的正确验证。我假设这是因为它具有与由不同函数验证的其他输入相似的属性名称。

如何让输入验证正常工作？

我尝试通过查找输入 ID 而不是输入名称来解决输入更改事件期间的问题，但它仍然调用 ValidateText 函数而不是 ValidateZipCode 函数。ValidateText 函数内部的 Console.logging 显示正确的 order[shipping_address_attributes][zipcode] 输入

if (orderForm) {
  orderForm.addEventListener('change', function(event) {
    validateOrderForm(event.target);
  });
};

function validateOrderForm(field) {
  if (ValidateInput(field)) {
    setValidStyles(field);
console.log("Success: " + field.value);
  } else {
setInvalidStyles(field);
console.log("Failing: " + field.value);
  }
}

function ValidateEmail(input) {
  let reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  console.log("Hello from: Email");
  return reg.test(input);
}

function ValidateText(input) {
  console.log("Hello from: Text");
  return (input.value.length > 0 && input.value.length < 121 && isNaN(input.value) && input.value != "");
}

function ValidateTextWithNumbers(input) {
  console.log("Hello from: TextWithNumbers");
  return (input.value.length > 0 && input.value.length < 121 && input.value != "");
}

function ValidateZipCode(input) {
  console.log("Hello from: Zipcode");
  let reg = /(^\d{5}$)|(^\d{5}-\d{4}$)/;
  return reg.test(input);
}

function ValidateInput(input) {
  if (input.name == "order[shipping_address_attributes][city]" || "order[shipping_address_attributes][state]" || "order[first_name]" || "order[last_name]") {
    return ValidateText(input);
  } else if (input.name == "order[email]") {
return ValidateEmail(input);
  } else if (input.name == "order[recipe_name]" || "order[shipping_address_attributes][address_one]" || "order[shipping_address_attributes][address_two]") {
return ValidateTextWithNumbers(input);
  } else if (input.name == "order[shipping_address_attributes][zipcode]") {
return ValidateZipCode(input);
  } else {
console.log("Input didnt match required input names.");
return false;
  }
}


<div class="order-field">
  <%= form.text_field :first_name, placeholder: "first name", class: "input-small green-input required" %>
</div>      
<div class="order-field">
  <%= form.text_field :last_name, placeholder: "last name", class: "input-small green-input required" %>
</div>

<%= form.fields_for :shipping_address do |builder| %>
  <div class="order-field">
    <%= builder.text_field :address_one, placeholder: "address 1", class: "input-small green-input required" %>
  </div>
  <div class="order-field">
    <%= builder.text_field :address_two, placeholder: "address 2", class: "input-small green-input" %>
  </div>
  <div class="order-field">
<%= builder.text_field :city, placeholder: "city", class: "input-small green-input required" %>
  </div>
  <div class="order-field">
<%= builder.text_field :state, placeholder: "state", class: "input-small green-input required" %>
  </div>
  <div class="order-field">
    <%= builder.text_field :zipcode, placeholder: "zipcode", class: "input-small green-input required" %>
  </div>
<% end %>

<div class="order-field">
  <%= form.text_field :email, placeholder: "email", class: "input-small green-input required" %>
</div>

该表单适用于具有一个 shipping_address 的 Order 模型。表单正确提交并与数据库验证一起正常工作，但在客户端我期望 order[shipping_address_attributes][zipcode] 输入调用 ValidateZipCode 函数，但它实际上是调用 ValidateText 函数。

标签： javascriptjqueryruby-on-railsvalidationinput

解决方案

您不能像这样将字符串或语句放在一起：

input.name == "订单[shipping_address_attributes][city]" || “订单[运输地址属性][状态]”|| “订单[名字]” || “订单[姓氏]”

这实际上在做的是：

input.name == "order[shipping_address_attributes][city]"

或者

"order[shipping_address_attributes][state]"

或...等

关键是第二个字符串以后没有与 input.name 进行比较。JS 正在评估"order[shipping_address_attributes][state]"一个布尔值，因为它不是空白的，所以它返回 true。

你要么需要做input.name == "order[shipping_address_attributes][city]" || input.name == "order[shipping_address_attributes][state]” || ...etc

或者更清洁一点：

[“订单[shipping_address_attributes][city]”，“order[shipping_address_attributes][state]”，“order[first_name]”，“order[last_name]”].includes（input.name）；

希望有帮助

推荐阅读