Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Can't get the code on http://www.javascriptkit.com/javatutors/form5.shtml to work

    Hi,

    Please excuse any ignorance I might be displaying, as I'm new to Javascript.

    I've been trying to get the code example working that's displayed on this tutorial site here:

    http://www.javascriptkit.com/javatutors/form5.shtml

    After copying/pasting this into a blank HTML page, the page displays correctly but none of the actions are happening as they do on the link above. I thought it might be an issue with the Wordpress underpinnings of my hosting site but I've just copy/pasted the same snippet of code into a blank Apache2 page on my OS X Mountain Lion system at home and I'm getting the exact same results - i.e., nothing.

    Here's the exact code that I've copied/pasted:

    Code:
    <script>
    function emailcheck(){
    var string1=document.example.email.value
    if (string1.indexOf("@")==-1){
    .alert("Please input a valid email address!")
    .document.example.email.focus()
    .}
    }
    </script>
    
    <form name="example"><input type="text" size="20" name="email" onblur="emailcheck()">
    <strong>Feedback please:</strong>
    <textarea name="S1" rows="2" cols="20"></textarea>
    <input type="submit" name="B1" value="Submit">
    </form>
    My HTML file contains ONLY the above content. I haven't been through the entire tutorial web-site content so I'm wondering if there's some critical element that I'm missing somewhere?

    Can anyone help me understand why I'm not seeing the behavior that the above tutorial explains that I should be seeing? I'm getting the same non-results from Chrome (Windows), Firefox (Windows & OS X) & Safari (OS X).

    - CDM

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    That is poor, and old, code, but it also has dots . which are not quite visible on the page, and aren't required. JS statements are semi-colon terminated as well;

    Code:
    function emailcheck(){
        var string1 = document.example.email.value;
        if (string1.indexOf("@") == -1) {
            alert("Please input a valid email address!");
            document.example.email.focus();
        }
    }
    It is modern practice NOT to give a form a name, but to use an id. And forms are required to have an action attribute (and should have a method attribute as well).

    Anyway, the following will at least get the example working:

    Code:
    <script>
    function emailcheck(){
        var string1 = document.example.email.value;
        if (string1.indexOf("@") == -1) {
            alert("Please input a valid email address!");
            document.example.email.focus();
        }
    }
    </script>
    
    <form action="#" method="get" name="example">
        <input type="text" size="20" name="email" onblur="emailcheck()">
    <strong>Feedback please:</strong>
    <textarea name="S1" rows="2" cols="20"></textarea>
    <input type="submit" name="B1" value="Submit">
    </form>
    BTW Your browser' console will have indicated the '.' errors to you.

    JavaScript Kit is frequently referred to for examples, but most of the examples I come across are out-dated and/or poor. I recommend Mozilla! Though, even Mozilla isn't perfect..
    Last edited by AndrewGSW; 01-02-2013 at 02:56 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    cdmonline (01-02-2013)

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,893
    Thanks
    202
    Thanked 2,528 Times in 2,506 Posts
    if (string1.indexOf("@")==-1) {
    is wholly inadequate as an email address validator.
    Use the search feature of this forum.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    if (string1.indexOf("@")==-1) {
    is wholly inadequate as an email address validator.
    Use the search feature of this forum.
    I agree, but that's not important. For my purpose, I'm just trying to get the mechanism of performing a validation of some sort working. The actual validation that I will be using will be a simple string comparison. The actual string comparison used here is by the by. Thanks :-)

    - CDM

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,021
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Well, from another standpoint, that code is needlessly complicated.

    Why not simply pass this into the function doing the check?

    Or do it the more modern unobtrusive way, in the first place:

    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <form id="example"><!-- named forms are obsolete...use id instead -->
    <input type="text" size="20" name="email">
    <strong>Feedback please:</strong>
    <textarea name="S1" rows="2" cols="20"></textarea>
    <input type="submit" name="B1" value="Submit">
    </form>
    
    <script type="text/javascript">
    (
      function( )
      {
          var form = document.getElementById("example");
          form.email.onchange = 
              function( )
              {
                  if ( this.value.indexOf("@") < 0 )
                  {
                      alert("invalid email address");
                      this.focus();
                  }
             }
      }
    )();
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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