Jump to content

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


Recommended Posts

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 by Shinori
Link to post
Share on other sites
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.

Link to post
Share on other sites
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 by Shinori
Link to post
Share on other sites

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>

 

Link to post
Share on other sites

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).

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...