By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,817 Members | 2,152 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,817 IT Pros & Developers. It's quick & easy.

JavaScript: New Line/Font Color/Bold Font Problem

P: 4
I am attempting to actively add multiple lines of text to the bottom of the page based on if conditions. However I am having trouble with breaking each message into its own line, making the text red and bold, and having the text blink if possible. After reading some info online I thought I had the problem fixed, however instead I see the following in the browser:

[HTML]<FONT COLOR="FF0000"><B> Password Must Contain Two Upper Case Letters.<br></B></FONT>
[/HTML]
when I use this code snippet:
Expand|Select|Wrap|Line Numbers
  1. else { // adds warning text
  2. var p3 = document.getElementsByTagName('upperCaseLetter')[0];
  3. if (newPassword != 0 && p3 == null){ //only adds warning if a password is present and no warning message exists
  4. var newPUpper = document.createElement("upperCaseLetter");
  5. var txtUpper = "\nPassword Must Contain Two Upper Case Letters.";
  6. txtUpper = txtUpper.bold().fontcolor("FF0000");
  7. var newTUpper = document.createTextNode(txtUpper);
  8. newPUpper.appendChild(newTUpper);
  9. var theBody = document.getElementsByTagName('body')[0];
  10. theBody.appendChild(newPUpper);
  11. }//end of if statment
  12.  
Any help is much appreciated!
Aug 7 '08 #1
Share this Question
Share on Google+
3 Replies


rohypnol
P: 54
Expand|Select|Wrap|Line Numbers
  1. else { // adds warning text
  2. var p3 = document.getElementsById('upperCaseLetter');
  3. if (newPassword && !p3){ //only adds warning if a password is present and no warning message exists
  4. var newPUpper = document.createElement('span');
  5. newPUpper.id = 'upperCaseLetter';
  6. var txtUpper = "Password Must Contain Two Upper Case Letters.";
  7. newPUpper.style.fontWeight = 'bold';
  8. newPUpper.style.color = 'red'; // or '#FF0000'
  9. newPUpper.appendChild(document.createTextNode(txtPUpper));
  10. document.body.appendChild(newPUpper);
  11. }//end of if statment
  12. }
  13.  
I think the editor on bytes.com adds some spaces on line 8 which breaks the variable name "txtPUpper" into "txtP Upper". if you see it like that, remove the spaces.
To hide the warning, use this:
Expand|Select|Wrap|Line Numbers
  1. document.getElementById('upperCaseLetter').style.display = 'none';
  2.  
To show again if it already exists and you just want to show it, use this:
Expand|Select|Wrap|Line Numbers
  1. document.getElementById('upperCaseLetter').style.display = 'inline';
  2.  
To test if the warning exists, use this:
Expand|Select|Wrap|Line Numbers
  1. if (document.getElementById('upperCaseLetter')) { /* exists */ } else { /* doesn't exist */ }
  2.  
Aug 7 '08 #2

P: 4
Thank you for your suggestion, it helped but I am still having trouble with have each piece of text appear on a new line. The idea is that when a user is actively typing in a password, it checks the complexity and updates which requirements are not meet. I have added the entire function responsible for this below. I did try using this:

Expand|Select|Wrap|Line Numbers
  1. var myUpperBreak=document.createElement("br");
  2. theBody.appendChild(newPUpper);
  3. theBody.appendChild(myUpperBreak);
  4.  
and it worked however, each time a message would reappear, it would lower on the page. Here is my entire function:

Expand|Select|Wrap|Line Numbers
  1. function testPassword (newPassword) {
  2.  
  3.         if (newPassword.match(/([a-z].*[a-z])/))  // checks for two lower case letters
  4.     {
  5.             var p2 = document.getElementById('lowerCaseLetter');
  6.             if (p2 != null){ //checks to see if there already exists warning text and removes it
  7.                 p2.parentNode.removeChild(p2);
  8.                 }//end of if statement
  9.     }//end of if statement
  10.         else { // adds warning text
  11.             var p2 = document.getElementById('lowerCaseLetter');
  12.             if (newPassword != 0 && !p2){ //only adds warning if a password is present and no warning message exists
  13.                 var newPLower = document.createElement('span');
  14.                 newPLower.id = 'lowerCaseLetter';
  15.                 var txtLower = 'Password Must Contain Two Lower Case Letters.';
  16.                 newPLower.style.fontWeight = 'bold';
  17.                 newPLower.style.color = 'blue';
  18.                 newPLower.appendChild(document.createTextNode(txtLower));
  19.                 document.body.appendChild(newPLower);
  20.                 }//end of if statment
  21.             else {//removes warning message if password is not entered and warning message exsists
  22.                 if (newPassword == 0 && p2 != null){
  23.                     p2.parentNode.removeChild(p2);
  24.                 }//end of if statement
  25.             }//end of else statement
  26.         }// end of else statement
  27.  
  28.         if (newPassword.match(/([A-Z].*[A-Z])/))  // checks for two upper case letters
  29.             {
  30.                     var p3 = document.getElementById('upperCaseLetter');
  31.                     if (p3 != null){ //checks to see if there already exists warning text and removes it
  32.                         p3.parentNode.removeChild(p3);
  33.                         }//end of if statement
  34.             }//end of if statement
  35.                 else { // adds warning text
  36.                     var p3 = document.getElementById('upperCaseLetter');
  37.                     if (newPassword != 0 && !p3){ //only adds warning if a password is present and no warning message exists
  38.                         var newPUpper = document.createElement('span');
  39.                         newPUpper.id = 'upperCaseLetter';
  40.                         var txtUpper = "Password Must Contain Two Upper Case Letters.";
  41.                         newPUpper.style.fontWeight = 'bold';
  42.                         newPUpper.style.color = 'red';
  43.                         newPUpper.appendChild(document.createTextNode(txtUpper));
  44.                         document.body.appendChild(newPUpper);
  45.                         }//end of if statment
  46.                     else {//removes warning message if password is not entered and warning message exsists
  47.                         if (newPassword == 0 && p3 != null){
  48.                             p3.parentNode.removeChild(p3);
  49.                         }//end of if statement
  50.                     }//end of else statement
  51.         }// end of else statement
  52.  
  53.     }//end of function testPassword
Aug 7 '08 #3

acoder
Expert Mod 15k+
P: 16,027
Instead of dynamically creating elements when there are errors, have them hidden on the page. When you need to show them, just change the display property to "block".
Aug 8 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.