JQuery check which input textbox's border color is red before redirecting

Question

I have a question. I design a button and when user clicks this button, it triggers a function to check which input textbox is red using JQuery. If one box is found, stop on this page instead of redirecting, and inform user that there is invalid input. Here is a demo: Link

HTML Code:

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

$('#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();
        }
    });
});

However, in demo the JQuery function is not working as expected. Please help me with it. Thanks a lot.

Checking styles for logical reasons is bad practice. I'd seriously consider using a data attribute, or at least a CSS class. — isherwood, Apr 15 '15 at 19:25
Also, use the form's submit event rather than click. What if the user hits enter? — isherwood, Apr 15 '15 at 19:26
@isherwood, thanks for your advice. I will use form's submit event — tonymiao, Apr 15 '15 at 19:28

Alexey · Answer 1 · 2015-04-15T19:29:14.250

3

For example:

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

edited Apr 15 '15 at 19:29

answered Apr 15 '15 at 19:28

Alexey

3,607
8
34
54

Here's an alternative with a data attribute. https://jsfiddle.net/isherwood/fzcvsj1m/1/ – isherwood Apr 15 '15 at 19:28
Thanks for your quick update Alexey. The reason why I didn't use CSS is that I use $('#Installation').css('border-color', 'red'); to set a red installation textbox border color. So the style part in html input is auto-add using JQuery before validation check above. So I don't have CSS file. – tonymiao Apr 15 '15 at 19:34

score 3 · Accepted Answer · answered Apr 15 '15 at 19:31

3

Try

$("#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/

answered Apr 15 '15 at 19:31

guest271314

1
15
104
177

You are welcome:) Does `js` return expected results ? – guest271314 Apr 15 '15 at 19:40
Hi @guest271314, would you please tell me what does 'toArray().some(...)' do? – tonymiao Apr 15 '15 at 19:47
@tonymiao See http://api.jquery.com/toArray/ _"Retrieve all the elements contained in the jQuery set, as an array."_ , https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some _"The some() method tests whether some element in the array passes the test implemented by the provided function."_ . If one of the `input` elements has `.css("border-color") === "rgb(255, 0, 0)"` return `true` – guest271314 Apr 15 '15 at 20:06
Great! I like your way. – tonymiao Apr 15 '15 at 20:12

JQuery check which input textbox's border color is red before redirecting

2 Answers2

Linked