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

Vote count:

0

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.

asked 3 mins ago

tonymiao

66

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