Проблемы с синтаксисом Basi c jQuery при попытке проверить ввод пользователя - пожалуйста, сообщите - PullRequest
Новая
       19

Проблемы с синтаксисом Basi c jQuery при попытке проверить ввод пользователя - пожалуйста, сообщите

2 голосов
/ 18 марта 2020

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

В следующем коде я получаю предупреждение «Не почтовый индекс» с каждым вводом - будь то действительный почтовый индекс или нет. 

$("body").on("click", "#searchBtn", function (event) {
event.preventDefault();
// The below is a regular expression (regex) to ensure user enters either a 5 digit or 9 digit US zip code format
var zip = ("^[0-9]{5}(?:-[0-9]{4})?$;");  
var input = $("#userInput").val().trim();
if (input!=zip) {
    alert("Not a Zip Code");  //the end goal is to have the placeholder color turn red
} else {
    alert("Thank you - your entry is valid");  //the end goal is to have the placeholder say "You are searching in zip code " (+ zip)"
};
});

Для решения этой проблемы - при замене: alert ("Not Zip Code"); С (и я попробовал несколько форматов на данный момент, но один пример: 

$("#userInput").addClass('red');

И для вышеупомянутого я добавил в свой CSS следующее: 

.red::placeholder {
color: red;
}

I также искали похожие вопросы на этой доске, но они либо более продвинуты, чем мое текущее понимание, либо используют программы, с которыми я еще не знаком. Заранее спасибо за помощь!

1 Ответ

2 голосов
/ 18 марта 2020 

$("body").on("click", "#searchBtn", function(event) {
  event.preventDefault();
  
  var $input = $("#userInput");
  var input = $input.val().trim();
  // Ensure user enters either a 5 digit or 9 digit US zip code format
  var isValid = /^\d{5}(-\d{4})?$/.test(input);
  
  $input.toggleClass('is-invalid', !isValid);
  alert(isValid ? "Thank you - your entry is valid" : "Not a Zip Code");

});
.is-invalid::placeholder { /* Don't use color-specific classes! */
  color: red;
}
<input id="userInput" type="text" placeholder="Enter US ZIP code">
<button id="searchBtn">SEARCH</button>

<script src="//code.jquery.com/jquery.min.js"></script>
...