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

cdmonline · 01-02-2013, 07:27 AM

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

AndrewGSW · 01-02-2013, 02:45 PM

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..

Philip M · 01-02-2013, 05:20 PM

if (string1.indexOf("@")==-1) {
is wholly inadequate as an email address validator.
Use the search feature of this forum.

cdmonline · 01-02-2013, 10:38 PM

Quote:

Originally Posted by Philip M

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

Old Pedant · 01-02-2013, 11:35 PM

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>