html- input background color update on validation-CodePudding

I want the input background color to be updated when client insert illegal email input. the current code doesn't work. what am i missing?

<input id="signup" type="submit" value="SIGN UP">
            <div id="email">
                <input type="email" id="inputMail" placeholder="Email">
                <img src="C:\Users\okazi\Desktop\email.png" id="imageMail">
            </div>

            <script type="text/javascript">
            var errorMassage = "";

            function isEmail(inputMail) 
            {
                var regex = /^([a-zA-Z0-9_. -]) \@(([a-zA-Z0-9-]) \.) ([a-zA-Z0-9]{2,4}) $/;
                return regex.test(inputMail);
            }

            $("#signup").click(function ()
            {
                if (isEmail($(inputMail).val()) == false)
                {
                    $("inputMail").css("background-color", "red");
                }

                alert(errorMassage);
            })
            </script>

CodePudding user response：

Here you are:

var errorMassage = "";

function isEmail(inputMail) {
  var regex =
    /^([a-zA-Z0-9_. -]) \@(([a-zA-Z0-9-]) \.) ([a-zA-Z0-9]{2,4}) $/;
  return regex.test(inputMail);
}

$("#signup").click(function() {
  if (isEmail($(inputMail).val()) == false) {
    $("#inputMail").css("background-color", "red");
  }

  alert(errorMassage);
});

<input id="signup" type="submit" value="SIGN UP" />
<div id="email">
  <input type="email" id="inputMail" placeholder="Email" />
  <img src="C:\Users\okazi\Desktop\TheKazim\photos\email.png" id="imageMail" />
</div>

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

Also, to change border color instead of background color replace $("#inputMail").css("background-color", "red"); with $("#inputMail").css("border-color", "red"); as below:

var errorMassage = "";

function isEmail(inputMail) {
  var regex =
    /^([a-zA-Z0-9_. -]) \@(([a-zA-Z0-9-]) \.) ([a-zA-Z0-9]{2,4}) $/;
  return regex.test(inputMail);
}

$("#signup").click(function() {
  if (isEmail($(inputMail).val()) == false) {
    $("#inputMail").css("border-color", "red");
  }

  alert(errorMassage);
});

<input id="signup" type="submit" value="SIGN UP" />
<div id="email">
  <input type="email" id="inputMail" placeholder="Email" />
  <img src="C:\Users\okazi\Desktop\TheKazim\photos\email.png" id="imageMail" />
</div>

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>