isEmpty() || === '' || === null -> not working?

Shinori · August 29, 2017

Dear W3schools community,

I want to check if a required input is empty (has more then 0 characters). You guys have any idea what I'm doing wrong?
Thanks in advance!

If there is no character in input (id="vname") I still get a red "bar"

Here's my code:

function foobar()
{
	var vname = document.getElementById('vname').value;			
	if (vname.length > 0 && vname != '' && vname != null)
	{
		document.getElementById('contact-response').style.color = 'green';
		document.getElementById('contact-response').innerHTML = "foo";
	}
	else
	{
		document.getElementById('contact-response').style.color = 'red';
		document.getElementById('contact-response').innerHTML = "bar";
	}
}

I also tried length, null and '' separately. I also tried doing it with isEmpty(). Also I tried using || instead of &&. Nothing worked yet.

Heres my HTML:

<div id="wrapper-contact">
  	<form>
		<input type="text" id="vname" placeholder="*Vname" required="yes">
    	<input type="button" onclick="foobar()" value="Senden">  
		<p id="contact-response"></p>
	</form>
</div>

Edited August 29, 2017 by Shinori

dsonesuk · August 29, 2017

Quote

If there is no character in input (id="vname") I still get a red "bar"

Which is correct? isn't it?

I can't see anything wrong, apart from required attribute should just be required or required="required".

Also if the user types something, and hits enter on keyboard, it will submit form and you won't see any message at all, the function should be triggered by onsubmit on the form element, and then the JavaScript should capture that event and use preventDefault() https://www.w3schools.com/jsref/event_preventdefault.asp.

If the form is going to be submitted and processed, a name attribute must be used on input elements to identify index name, that the value is saved to.

Shinori · August 29, 2017

12 minutes ago, dsonesuk said:

Which is correct? isn't it?

I can't see anything wrong, apart from required attribute should just be required or required="required".

Also if the user types something, and hits enter on keyboard, it will submit form and you won't see any message at all, the function should be triggered by onsubmit on the form element, and then the JavaScript should capture that event and use preventDefault() https://www.w3schools.com/jsref/event_preventdefault.asp.

If the form is going to be submitted and processed, a name attribute must be used on input elements to identify index name, that the value is saved to.

I'm sorry. Meant to say the following: "If input (id="vname) is empty i only get a green 'foo'"

I want to check if the string in input is empty if so print success else print errormsg.

Checking for empty string isnt't working.

vname.isEmpty()

vname === ''

vname.length === 0

vname === null

and reversed operators do not work.

This is the entire code. I'm trying to use it with AJAX (without jquery):

nname, email, bday and msg could also be empty. But its not even working with vname.

	<script>
		function send_mail()
		{
			var vname = document.getElementById('vname').value;
			var nname = document.getElementById('nname').value;
			var email = document.getElementById('email').value;
			var bday = document.getElementById('bday').value;
			var msg = document.getElementById('textkontakt').value;
			var xmlhttp = new XMLHttpRequest();
			xmlhttp.onreadystatechange = function()
			{
				if (this.readyState == 4 && this.status == 200)
				{
						document.getElementById('wrapper-contact').innerHTML = this.responseText;
				}
			};
			if (vname.length === 0 || vname === '' || vname == null)
			{
				document.getElementById('contact-response').style.color = 'red';
				document.getElementById('contact-response').innerHTML = "Eine oder mehrere Felder sind nicht ausgefüllt<br> Anfrage konnte nicht gesendet werden!";
			}
			else
			{
				xmlhttp.open('POST', "sendmail.php?vname=" + vname + "&nname="  + nname + "&email=" + email + "&bday=" + bday + "&msg=" + msg, true);
				xmlhttp.send();
			}
		}
	</script>

HTML:

<body>
<div id="wrapper-contact">
	<img src="\ressource\images\nydoo-title-trans.png" class="logo-small" title="Nydoo Logo (trans)" alt="Usually there should be an image here. It may be an error but could<br>also be down to a slow internet connection or a plugin installed on your browser!" id="image-title">
	<form action="">
		<p class="nydoo-regular font-size-12 color-white text-align-left">Es kann bis zu 2 Werktage dauern,<br> bis wir Ihre Nachricht bearbeiten<br>Sollten Sie schneller eine Antwort benötigen,<br> kontaktieren Sie uns unter +49 1573 2695219</p>
		<input class="transform-x-50 margin-left-50percent margin-top-30 textinsert-large" type="text" id="vname" placeholder="*Vorname" required>
		<input class="transform-x-50 margin-left-50percent margin-top-5 textinsert-large" type="text" id="nname" placeholder="*Nachname" required>
		<input class="transform-x-50 margin-left-50percent margin-top-5 textinsert-large" type="email" id="email" placeholder="*Email" required>
		<input class="transform-x-50 margin-left-50percent margin-top-5 textinsert-large" type="date" id="bday">
		<textarea id="textkontakt" class="transform-x-50 margin-left-50percent margin-top-5 textinsert-large" placeholder="*Nachricht" style="height:150px" required></textarea>
		<input class="transform-x-50 margin-left-50percent margin-top-10 button-submit-medium" onclick="send_mail()" type="button" value="Senden">
		<p class="nydoo-regular font-size-12 color-white text-align-left">*Erforderliches Feld</p>
		<p id="contact-response" class="nydoo-regular font-size-12 color-white text-align-left"></p>
	</form>
</div>
</body>

Edited August 29, 2017 by Shinori

dsonesuk · August 29, 2017

As I said it works fine, I have redone below, fixed requirement and it still works as it did before corrections.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0" />
        <title>Document Title</title>
    </head>
    <body>
        <div id="wrapper-contact">
            <form>
                <input type="text" id="vname" placeholder="*Vname" name="fname" required="required">
                <input type="button" onclick="foobar()" value="Senden">
                <p id="contact-response"></p>
            </form>
        </div>
        <script type="text/javascript">
            function foobar()
            {
                var vname = document.getElementById('vname').value;

                if (vname.length > 0 && vname != '' && vname != null)
                {
                    document.getElementById('contact-response').style.color = 'green';
                    document.getElementById('contact-response').innerHTML = "foo";
                }
                else
                {
                    document.getElementById('contact-response').style.color = 'red';
                    document.getElementById('contact-response').innerHTML = "bar";
                }
            }
        </script>
    </body>
</html>

Shinori · August 29, 2017

Well I replied those if-conditions. Still no change.

In my original code im checking if string is empty before posting http data to another site via AJAX.

Could AJAX cause problems? See code above.

Thanks for your patience and endruance! :-)

dsonesuk · August 29, 2017

You really don't need the null condition, as the value you are checking is always a string, whether a empty string, number or text , the first 2 should suffice, and instead of || use && to make sure both conditions are met.

justsomeguy · August 29, 2017

If you're checking if the string length is 0, and it says it's not, then print the length to the console so you can see what it says. Print the actual value you're testing. Loop through each character and print the character code. There are a bunch of things you can do to verify what your code is doing rather than just guessing with things like comparing it with null (it will never be null).

Sign In

isEmpty() || === '' || === null -> not working?

Recommended Posts

Shinori

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Shinori

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Shinori

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity