validation doesn't work if value is empty

Question

So I have this code where I am saying if website_name==="" display error however it doesn't seem to work because if I type something and delete it so it's empty it still shows it's valid so it runs else statement, however if I type a number then I get an error, but I need it to work for empty values too.

var message;
    var inputField = document.getElementById("website_name");
$( "#website_name" ).keyup(function() {
  if(website_name==="" || !/^[a-z]*$/.test(this.value))
  {
    $("#website_name").css('border', '3px solid red');
    inputField.style.backgroundColor = "#f27676";
    message = 'Only lower case characters allowed!';
    $('div.modal-body .msgPlaceholder').empty().append(message);
  }else{
    $("#website_name").css('border', '3px solid green');
    inputField.style.backgroundColor = "#56c145";
    message = 'Your name is correct';
    $('div.modal-body .msgPlaceholder').empty().append(message);
  }
});

The the "===" makes sure, that the data type is exactly the same as what you are comparing with. Assume website_name is undefined, then it is not true if you compare to an empty string. So use just two "==" and automatic typecasting takes place and will return a true as undefined matches an empty string. — Markus Zeller
– Markus Zeller, Commented Mar 8, 2017 at 12:10

Zakaria Acharki · Accepted Answer · 2017-03-08 12:29:36Z

6

You have to use this.value == "" and not website_name == "" since website_name is not a variable

if you want to use toLowerCase before checking, try this:

var val = this.value.toLowerCase();
if (val == "")

var message;
var inputField = document.getElementById("website_name");
$("#website_name").keyup(function() {
  if (this.value == "" || !/^[a-z]*$/.test(this.value)) {
    $("#website_name").css('border', '3px solid red');
    inputField.style.backgroundColor = "#f27676";
    message = 'Only lower case characters allowed!';
    $('div.modal-body .msgPlaceholder').empty().append(message);
  } else {
    $("#website_name").css('border', '3px solid green');
    inputField.style.backgroundColor = "#56c145";
    message = 'Your name is correct';
    $('div.modal-body .msgPlaceholder').empty().append(message);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="website_name" />

edited Mar 8, 2017 at 12:29

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

answered Mar 8, 2017 at 12:09

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Loïc Faure-Lacroix Over a year ago

I'd add that to make things fair and more universal. Don't use a regex to check for uppercase/lowercase... Websites aren't limited to letter from a to z. And a better idea would be to lowercase what the user input instead of checking for lowercase... just use "toLowerCase".

Carsten Løvbo Andersen Over a year ago

@LoïcFaure-Lacroix is that a coment to me or to Przemek?

Przemek Over a year ago

@LoïcFaure-Lacroix so how would code look like with your suggestion?

Carsten Løvbo Andersen Over a year ago

@Przemek Since LoicFaure dont seem to reply, then i updated the answer, just above the snippet i added a toLowerCase way for you

Collectives™ on Stack Overflow

validation doesn't work if value is empty

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related