www.webdeveloper.com
Results 1 to 9 of 9

Thread: Can't get equal to null to work

  1. #1
    Join Date
    Nov 2013
    Posts
    69

    Can't get equal to null to work

    Could someone please tell me why this doesn't work before I pull my hair out? I am trying to validate a simple form with JavaScript and I want to check if the form fields are null but can't get it to work if they are. If I change the statement to != and put something in the form field, it will prompt the alert. Shouldn't it work the same way if it is null? I even tried equal to an empty string (=== "") and that didn't work either.

    Oh. I would rather use innerHTML instead of an alert box for the error message. Is there a way to get the innerHTML to stay on the page. I realize that when the submit button is clicked, the page reloads and that is why it goes away, but is there a way to stop it from reloading?

    Thanks to anyone taking a look!

    Code:
    function validate(){
    			
    	var usrName = document.getElementById('rUsrName');
    	var pwd = document.getElementById('rPasswd');
    	var pwdCf = document.getElementById('rPasswdCfm');
    				
    	if(usrName === null){
    		alert('Please fill in each field');
    		//document.getElementById('errMsg').innerHTML = "Please enter each field";
           }
    				
    				
    }//end validate
    Just in case a look at the form is needed.
    Code:
    <form method='post'> 
    	<fieldset>
    	<legend>Register</legend>	
    			
    		<label for='rUsrName'>User Name:</label>
    		<input id='rUsrName' name='rUsrName' type='text'>
    
    		<label for='rPasswd'>Password:</label>
    		<input id='rPasswd' name='rPasswd' type='password'>
    					
    		<label for='rPasswdCfm'>Pwd Confirm:</label>
    		<input id='rPasswdCfm' name='rPasswdCfm' type='password'>
    					
    		<input onclick='validate();' type='submit' value='Register'>
    											
    		<h4 id='errMsg'>&nbsp;</h4>
    	/fieldset>
    </form>

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    We must not only test the null values ​​but the white spaces, tabs, and other lines feed or carriage return
    So something like this should suit
    Code:
          if (usrName.replace(/[^\s]+/g,'')=='') alert('Please fill your user Name !')
    We replace all characters which are not spaces, tabulations, ... before to test.

  3. #3
    Join Date
    Nov 2013
    Posts
    69
    Quote Originally Posted by 007Julien View Post
    We must not only test the null values ​​but the white spaces, tabs, and other lines feed or carriage return
    So something like this should suit
    Code:
          if (usrName.replace(/[^\s]+/g,'')=='') alert('Please fill your user Name !')
    We replace all characters which are not spaces, tabulations, ... before to test.
    This doesn't work either.

  4. #4
    Join Date
    Nov 2013
    Posts
    69
    So here is the problem but I am not sure how to do it properly. When the submit button is pressed, the values in the form fields are not being passed into the variables. Instead, [object HTMLInputElement] is what is being passed into the variables.

    How can I fix this?

  5. #5
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    248
    Quote Originally Posted by 007Julien View Post
    We must not only test the null values €‹€‹but the white spaces, tabs, and other lines feed or carriage return
    So something like this should suit
    Code:
          if (usrName.replace(/[^\s]+/g,'')=='') alert('Please fill your user Name !')
    We replace all characters which are not spaces, tabulations, ... before to test.
    Hm...if user "inputs" one or more empty strings (by hitting his/hers spacebar key") the check will fail and I'm sure you don't want to allow empty strings as user names. Maybe something like this would work better:

    Code:
    var re = /^\B|\b {2,}/
    that would prevent empty strings and two or more empty spaces... For example: "" or "name surname" (note the double space between name and surname).

    Could someone please tell me why this doesn't work before I pull my hair out? I am trying to validate a simple form with JavaScript and I want to check if the form fields are null but can't get it to work if they are. If I change the statement to != and put something in the form field, it will prompt the alert. Shouldn't it work the same way if it is null? I even tried equal to an empty string (=== "") and that didn't work either.

    Oh. I would rather use innerHTML instead of an alert box for the error message. Is there a way to get the innerHTML to stay on the page. I realize that when the submit button is clicked, the page reloads and that is why it goes away, but is there a way to stop it from reloading?

    Thanks to anyone taking a look!
    First you're initialing the userName variable with the <input> element (object) instead of its value.

    Code:
    //this line of code should be corrected
    var usrName = document.getElementById('rUsrName');
    
    //with this line of code
    var usrName = document.getElementById('rUsrName').value
    Second null is a word of special meaning in JavaScript. You cannot check if userName is equal to null. You can check if its length property is equal to 0 which would indicate that there were no input at all or you can check it for empty strings or some other value...

    Be aware that if you're going to check the length of a rUsrName field, space characters are also counting. So, one solution to this problem is to use Regular expression to test for valid inputs.

    Possible solution:

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8" />
      <title>Untitled</title>
    </head>
    <body>
      <form method='post'> 
    	<fieldset>
    	<legend>Register</legend>	
    			
    		<label for='rUsrName'>User Name:</label>
    		<input id='rUsrName' name='rUsrName' type='text'>
    
    		<label for='rPasswd'>Password:</label>
    		<input id='rPasswd' name='rPasswd' type='password'>
    					
    		<label for='rPasswdCfm'>Pwd Confirm:</label>
    		<input id='rPasswdCfm' name='rPasswdCfm' type='password'>
    					
    		<input onclick='validate()' type='button' value="Register"/>
    											
    		<h4 id='errMsg'>&nbsp;</h4>
    	</fieldset>
    </form>
    </body>
    </html>
    Code:
      function validate(){
          
          var usrName = document.getElementById('rUsrName').value;
          var pwd = document.getElementById('rPasswd');
          var pwdCf = document.getElementById('rPasswdCfm');
          var errElem = document.getElementById('errMsg');
    				
          if(/^\B|\b {2,}/.test(usrName)) {
    		errElem.innerHTML = "Please input valid username!!!";
          } else {
              if (errElem.innerHTML !== "") errElem.innerHTML = "";
          }
        }
    Last edited by tech_soul8; 02-09-2014 at 10:22 AM.

  6. #6
    Join Date
    Nov 2013
    Posts
    69
    Thanks tech_soul8. The lack of .value was really messing me up.

    Here is what I ended up writing. I am not sure if it makes much of a difference but I changed the onclick that was at the submit button to an onsubmit at the form tag.
    I found the way to solve the problem of the page reloading each time was to return false if the check fails. That way, the page does not reload and I can make the innerHRML error message stay.

    Thanks to all who took a look!

    Code:
    function validate(){
    			
    		var usrName = document.getElementById('rUsrName').value;
    		var pwd = document.getElementById('rPasswd').value;
    		var pwdCf = document.getElementById('rPasswdCfm').value;
    				
    		if((usrName == null || usrName == "") || (pwd == null || pwd == "") || (pwdCf == null || pwdCf == "")){
    				 document.getElementById('errMsg').innerHTML = "Please fill in each field";
    				 return false;
    		}else if(usrName.length < 4){
    			document.getElementById('errMsg').innerHTML = "Username must be at least 4 characters";
    			return false;
    		}else if((pwd.length < 4) || (pwdCf.length < 4)){
    			document.getElementById('errMsg').innerHTML = "Password must be at least 4 characters";
    			return false;
    		}else if(pwd != pwdCf){
    			document.getElementById('errMsg').innerHTML = "Passwords must match";
    			return false;
    		}else{
    			return true;	
    		}
    			
    	}//end validate

  7. #7
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    248
    If this is just for exercise then ok. Otherwise you should be aware that JavaScript shouldn't be used to validate user passwords etc...

  8. #8
    Join Date
    Nov 2013
    Posts
    69
    Quote Originally Posted by tech_soul8 View Post
    If this is just for exercise then ok. Otherwise you should be aware that JavaScript shouldn't be used to validate user passwords etc...
    Of course. This is just an exercise.

  9. #9
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    I make a mistake. Try this code :
    Code:
    if (usrName.replace(/[\s]+/g,'')=='') alert('Please fill your user Name !')
    We have to delete all spaces, tabulations ... etc. with a g to delete all occurrences, before to compare with the empty string !

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles