Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Problem with javascript unblur function

Maja0802

Well-Known Coder
Hey

I am new to coding and is stuck as I am trying to use javascript function to make an onblur effekt. I want to make a box with "First Name" (which is working) and then allow the user to type in between 2-15 characters. If less it used, the site should say "Enter between 2 and 15 characters" with unblur effect and if it is between 2-15 characters it should say "valid"....

I have made my html and my javascript file/code in two separate files and linked them through
<script type="text/javascript" src="formvalidation1.js"></script>

(I am not sure, how to post correctly in these forums, so I try. Please do correct me if I can post the code in a way, that makes it easier for you to read (pictures of the code attached)

(NOT CODE. STARTS HERE)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">

<title> Form Validation</title>
<script type="text/javascript" src="formvalidation1.js"></script>
</head>
<body>
<form action="#">
<div id="fullpage">
<H1> Make an order</H1>

<table border="0">
<tr>
<td class="label_col">First Name:</td>
<td class="input_col"><input name="firstName" id="firstNamePrompt" type="text" onblur="validateFirstName ();"></td>
<td class="feedback_col"><span id="firstNamePrompt">&nbsp;</span>

</tr>
</body>


</html>


(NOT CODE. FORM VALIDATION1.JS FILE below)

function validateFirstName () { //test unput for 2-15 charachters allowed
var fName =document.getElementById("firstName").value;
var rel=/^[a-zA-Z\s\'\-] {2,15}$/;

if (rel.test(fName)) { // if input i sbalid, update page to show succes
document.getElementById("firstNamePrompt").style.color="green";
document.getElementById("firstNamePrompt").innerHTML="<strong>valid</strong>"
return true;
}
else { //if input is invalid, update page to promt for new input
document.getElementById("firstNamePrompt").style.color="red";
document.getElementById("firstNamePrompt").innerHTML= "<strong>Enter between 2 and 15 characters</strong>"
return false;
}
}
 

Attachments

  • Skærmbillede 2020-09-14 kl. 22.46.17.png
    Skærmbillede 2020-09-14 kl. 22.46.17.png
    347.1 KB · Views: 1
  • Skærmbillede 2020-09-14 kl. 22.46.40.png
    Skærmbillede 2020-09-14 kl. 22.46.40.png
    532.2 KB · Views: 1
  • Skærmbillede 2020-09-14 kl. 22.47.30.png
    Skærmbillede 2020-09-14 kl. 22.47.30.png
    30.9 KB · Views: 1
I couldn't get onblur to work right, so I did a little custom jQuery to check at keystroke instead:

HTML:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Form Validation</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <form action="#">
      <div id="fullpage">
        <h1>Make an order</h1>

        <table border="0">
          <tr>
            <td class="label_col">First Name:</td>
            <td class="input_col">
              <input name="firstName" id="firstNameInput" type="text" />
            </td>
            <td class="feedback_col">
              <span id="firstNamePrompt">&nbsp;</span>
            </td>
          </tr>
        </table>
      </div>
    </form>
    <script type="text/javascript">
        $("#firstNameInput").keypress(function() {
            if($(this).val().length >= 1 && $(this).val().length < 15) {
                $("#firstNamePrompt").html("<strong>valid</strong>");
            } else {
                $("#firstNamePrompt").html("<strong>Enter between 2 and 15 characters</strong>");
            }
        });
      </script>
  </body>
</html>

That's not 100% what you were going for but its a start.

A couple of notes:
- You can only use an ID once. You had your <input> and <span> both with the ID of firstNamePrompt.
- You can't leave HTML tags open (<div>, <table> and <form>). When you're looking at a wall of code it can be easy to miss, so I'd recommend using an HTML validator when you're troubleshooting to rule out any nesting issues.
- Don't style your code in JavaScript or HTML. (document.getElementById("firstNamePrompt").style.color="red";) Use a stylesheet and jQuery/JavaScript to toggle a stylized class on or off. It'll save you a lot of headaches later.


I'll keep trying with onblur and edit this post with what I come up with.
 
Last edited:
I couldn't get onblur to work right, so I did a little custom jQuery to check at keystroke instead:

HTML:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Form Validation</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <form action="#">
      <div id="fullpage">
        <h1>Make an order</h1>

        <table border="0">
          <tr>
            <td class="label_col">First Name:</td>
            <td class="input_col">
              <input name="firstName" id="firstNameInput" type="text" />
            </td>
            <td class="feedback_col">
              <span id="firstNamePrompt">&nbsp;</span>
            </td>
          </tr>
        </table>
      </div>
    </form>
    <script type="text/javascript">
        $("#firstNameInput").keypress(function() {
            if($(this).val().length >= 1 && $(this).val().length < 15) {
                $("#firstNamePrompt").html("<strong>valid</strong>");
            } else {
                $("#firstNamePrompt").html("<strong>Enter between 2 and 15 characters</strong>");
            }
        });
      </script>
  </body>
</html>

That's not 100% what you were going for but its a start.

A couple of notes:
- You can only use an ID once. You had your <input> and <span> both with the ID of firstNamePrompt.
- You can't leave HTML tags open (<div>, <table> and <form>). When you're looking at a wall of code it can be easy to miss, so I'd recommend using an HTML validator when you're troubleshooting to rule out any nesting issues.
- Don't style your code in JavaScript or HTML. (document.getElementById("firstNamePrompt").style.color="red";) Use a stylesheet and jQuery/JavaScript to toggle a stylized class on or off. It'll save you a lot of headaches later.


I'll keep trying with onblur and edit this post with what I come up with.
Thanks for your reply!

There might be a few things I need to learn to understand you reply completely, but thanks anyway. Makes sense with the id!

I am using Atom to code - any idea what HTML validator I could install...can't really seem to find the answer just by using Google...?
 
Thanks for your reply!

There might be a few things I need to learn to understand you reply completely, but thanks anyway. Makes sense with the id!

I am using Atom to code - any idea what HTML validator I could install...can't really seem to find the answer just by using Google...?

It looks like you can install an HTML validator into Atom: https://atom.io/packages/w3c-validation

Or using the website I linked above, you can copy and paste your code into it (see the Validate by Direct Input at the top). It'll tell you if you didnt close any of HTML tags.

For example, when you open an HTML tag like <div> you need to close it with </div> after you've got your code inside.

HTML:
<html> <!-- open html tag -->
    <head> <!-- open head tag -->
        <title>Hello, World</title>
    </head> <!-- closed head tag -->
    <body> <!-- open body tag -->
        <div> <!-- open div tag -->
            <h1> <!-- open heading tag -->
                Hello, I am a title
            </h1> <!-- closed heading tag -->
        </div> <!-- closed div tag -->
    </body> <!-- closed body tag -->
</html> <!-- closed html tag -->

The validators will check to make sure everything is closed properly, check for duplicate IDs and more.
You can read more here: https://www.lifewire.com/nesting-html-tags-3466475
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom