Question

我有一个问题。我设计了一个按钮，当用户单击此按钮时，它会触发一个函数，使用JQuery检查哪个输入文本框是红色的。如果找到一个框，则在此页面上停止而不是重定向，并通知用户输入无效。这是一个演示：Link

HTML代码：

<input type="text" list="list" autocomplete="on" name="client" id="clientTxt" style="border-color: red; display: inline-block;">
<input type="text" list="list1" autocomplete="on" name="Installation" id="Installation" style="border-color: red; display: inline-block;">
<input type="submit" value="Create" id="create-submit">

JQuery代码：

$('#create-submit').click(function (event) {
    $('input[type = text]').each(function (event) {
        if ($(this).css('border-color') == 'red') {
            alert("Please check red input boxes and click create again.");
            event.preventDefault();
        }
    });
});

但是，在演示中，JQuery函数没有按预期工作。请帮帮我。非常感谢。

Answer 1

例如：

<强> CSS

.error{
   border: 1px solid red;
}

<强> HTML

<input type="text" list="list" autocomplete="on" name="client" id="clientTxt" class="error">
<input type="text" list="list1" autocomplete="on" name="Installation" id="Installation" class="error">
<input type="submit" value="Create" id="create-submit">

<强> JS

$('#create-submit').click(function (event) {
    $('input[type = text]').each(function (event) {
        if ($(this).hasClass('error')) {
            alert("Please check red input boxes and click create again.");
            event.preventDefault();
        }
    });
});

Answer 2

尝试

$("#create-submit").click(function(event) {
  event.preventDefault();
  var res = $("input[type=text]").toArray().some(function(el) {
    return $(el).css("border-color") === "rgb(255, 0, 0)"
  });
  // `border-color` === `rgb(255, 0, 0)` , `border-color`:`"red"`
  if (res) {
    alert("Please check red input boxes and click create again.");
  } else {
    // do other stuff
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="text" list="list" autocomplete="on" name="client" id="clientTxt" style="border-color: red; display: inline-block;">
<input type="text" list="list1" autocomplete="on" name="Installation" id="Installation" style="border-color: red; display: inline-block;">
<input type="submit" value="Create" id="create-submit">

jsfiddle https://jsfiddle.net/fzcvsj1m/2/

在重定向之前，JQuery检查哪个输入文本框的边框颜色为红色

2 个答案: