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

M

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.webp
    Skærmbillede 2020-09-14 kl. 22.46.17.webp
    69.7 KB · Views: 1
  • Skærmbillede 2020-09-14 kl. 22.46.40.webp
    Skærmbillede 2020-09-14 kl. 22.46.40.webp
    69.4 KB · Views: 1
  • Skærmbillede 2020-09-14 kl. 22.47.30.webp
    Skærmbillede 2020-09-14 kl. 22.47.30.webp
    9.6 KB · Views: 1
Sort by date Sort by votes
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.

The W3C Markup Validation Service

W3C's easy-to-use markup validation service, based on SGML and XML parsers.
validator.w3.org validator.w3.org

I'll keep trying with onblur and edit this post with what I come up with.
 
Last edited:
Upvote 0 Downvote
edenwax said:
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.

The W3C Markup Validation Service

W3C's easy-to-use markup validation service, based on SGML and XML parsers.
validator.w3.org validator.w3.org

I'll keep trying with onblur and edit this post with what I come up with.
Click to expand...
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...?
 
Upvote 0 Downvote
Maja0802 said:
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...?
Click to expand...

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
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom