Событие изменения ввода вызывает неправильную функцию, но регистрирует правильное событие ввода - PullRequest
Новая
       40

Событие изменения ввода вызывает неправильную функцию, но регистрирует правильное событие ввода

0 голосов
/ 20 декабря 2018

У меня есть форма заказа с информацией о выставлении счетов и доставке, и я хочу проверить каждый вход с соответствующими функциями.

Все входы вызывают свои правильные проверки, кроме одного.Я предполагаю, что это потому, что у него есть имя атрибута, похожее на то, что другие входные данные проверяются другой функцией.

Как правильно настроить проверку ввода?

Я попытался обратиться квыдается во время события изменения ввода путем поиска идентификатора входных данных, а не имени входных данных, но все равно вызывает функцию ValidateText, а не функцию ValidateZipCode.Console.logging изнутри функции ValidateText показывает правильный порядок [shipping_address_attributes] [zipcode] input 

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>

Форма предназначена для модели заказа, в которой есть_доставка_доставки.Форма отправляется правильно и корректно работает с проверками базы данных, но на стороне клиента я ожидаю, что вход order [shipping_address_attributes] [zipcode] вызовет функцию ValidateZipCode, но на самом деле он вызывает функцию ValidateText.

1 Ответ

0 голосов
/ 20 декабря 2018

Нельзя объединять строки или операторы следующим образом:

input.name == "order [shipping_address_attributes] [city]" ||"order [shipping_address_attributes] [state]" ||"order [first_name]" ||"order [last_name]"

То, что на самом деле делает: 

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

, либо немного чище:

["order [shipping_address_attributes] [city]", "order [shipping_address_attributes] [state]", "order [first_name]", "order [last_name]»]. includes (input.name);

Надеюсь, чтопомогает * * 1023

...