[RESOLVED] adding functions to click event

I'm wondering how to validate a form if first checking for data in the text boxes and then also checking for to make sure they match a certain length to be for acceptability.

Code:

---

<script type="text/javascript">
    <!-- Hide from non-JavaScript browsers
 
                function checkInputs() {
                        if (document.forms[0].address.value == "" || document.forms[0].city.value == ""  ||
                            document.forms[0].state.value == "" || document.forms[0].country.value == "" ||
                                document.forms[0].post.value == "" || document.forms[0].phone.value == ""){
                                        window.alert("Missing data");
                                        return false;
                        }
                        return true;
                       
               
               
            if(document.forms[0].post.length !=5 )
            { alert ('Zipcode should be five digits.');
            return false;}
                       
                           
                        if(document.forms[0].phone.length !=10 )
              { alert ('Phone # should be 10 digits.');
            return false;}                         

           
       
               
               
                function confirmReset() {
                        var resetForm = window.confirm("Are your sure you want to reset this form?");
                        if (resetForm == true)
                                return true;
                        return false;
                }
               
               
       



                // Stop hiding -->
        </script>

---

well, that code there basically looks like it should work. the only problem is that you're always returning true when that first IF statement isn't true. as soon as a function returns a value, it stops executing. so, you can simply move that "return true" down to the bottom of your first function.

doesn't look like you're properly ending your function, either. you're missing a closing brace ("}") for checkInputs().

It still doesn't seem to be working properly. I put the 'return true' at the bottom of the first function. Did you mean like this?

Code:

---

<script type="text/javascript">
   
 
                function checkInputs() {
                        if (document.forms[0].address.value == "" || document.forms[0].city.value == ""  ||
                            document.forms[0].state.value == "" || document.forms[0].country.value == "" ||
                                (document.forms[0].post.value == "") || (document.forms[0].phone.value == "" ){
                                        window.alert("Missing data");
                                        return false;
                        }
                       
                       
               
               
            if(document.forms[0].post.length !=5 )
            { window.alert ('Zipcode should be five digits.');
            return false;}
                       
                           
                        if(document.forms[0].phone.length !=10 )
              { window.alert ('Phone # should be 10 digits.');
            return false;}       
             
                          return true;
                          }

           
       
               
               
                function confirmReset() {
                        var resetForm = window.confirm("Are your sure you want to reset this form?");
                        if (resetForm == true)
                                return true;
                        return false;
                }

---

what doesn't work about it? what errors do you get, if any?

other than being incredibly messy looking because of your mix of tabs/spaces for indenting, it looks okay syntactically.

[can't test it myself right now]

I don't get the window alerts if data hasn't been entered or if only a couple of fields were entered. If I try to submit without entering data, I get the web page saying:

Internet Explorer cannot display the webpage

What you can try:
Diagnose Connection Problems

More information

Code:

---

html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Forms</title>

<script type="text/javascript">
   

                function checkInputs() {
                if (document.forms[0].address.value == "" || document.forms[0].city.value == ""  ||
                        document.forms[0].state.value == "" || document.forms[0].country.value == "" ||
                    document.forms[0].post.value == "" || document.forms[0].phone.value == "" ){
                                        window.alert("Missing data");
                                        return false;}


        var len = post.length;
        var digits = "0123456789";
            if(document.forms[0].post.len !=5 )
              { window.alert('Postal code should be five digits.');
            return false;}
                       
                        for(i=0; i<5; i++)
            {if (digits.indexOf(post.charAt(i))<0)
              { window.alert ('Invalid characters for Postal Code.');
            return false;}
            }


                        if(document.forms[0].phone.length !=10 )
              { window.alert('Phone # should be 10 digits.');
            return false;}

                        return true;
                        }
                         
                       
        function confirmReset() {
                        var resetForm = window.confirm("Are your sure you want to reset this form?");
                        if (resetForm == true){
                                return true;}
                        return false;
                }

 
        </script>

---

You are missing a curly brace in your confirmReset() function:

Code:

---

function confirmReset() {
  var resetForm = window.confirm("Are your sure you want to reset this form?");
  if (resetForm == true){
  return true;}
  return false;
}

---

Thank you SambaNeko. I've got the missing data alerts working again but still not having any luck getting alerts when postal code isn't 5 character, or invalid characters or for phone not being 10 characters.

The JavaScript tool I checked this file against is saying that there is the following errors with document:

syntax error on line 13, function "alert" not found.
syntax error on line 19, post.len not found in global/local vars, parameters,functions or object properties/methos.
syntax error on line 20, function "alert" not found.
syntax error on line 25, function "alert" not found.
syntax error on line 31, function "alert" not found.
warning on line 79. tag named/id "state" is a DOM property/method.

I'm not sure why the window alert at 19,20,25,31 are wrong? It looks similar to how it was used in the first instance of alerting for missing data from the fields.

Got the "postal code should be 5 digits" alert to appear by remarking out some of the code. but the alert still apears even when 5 digits are actually entered for postal code?

Code:

---

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Forms</title>

<script type="text/javascript">
   

                function checkInputs() {
                if (document.forms[0].address.value == "" || document.forms[0].city.value == ""  ||
                        document.forms[0].state.value == "" || document.forms[0].country.value == "" ||
                    document.forms[0].post.value == "" || document.forms[0].phone.value == "" ){
                                        window.alert('Missing data');
                                        return false;}


          // var len = post.length;
          //var digits = "0123456789";
            if(document.forms[0].post.length !=5 )
              { window.alert('Postal code should be five digits');
            return false;}

                        //for(i=0; i<5; i++)
          // {if (digits.indexOf(post.charAt(i))<0)
            //  { window.alert ('Invalid characters for Postal Code');
            //return false;}
          // }


                        if(document.forms[0].phone.length !=10 )
              { window.alert('Phone # should be 10 digits');
            return false;}

                        return true;
                        }


        function confirmReset() {
                        var resetForm = window.confirm('Are your sure you want to reset this form?');
                        if (resetForm == true){
                                return true;}
                        return false;
                }

 
        </script>

---

You could try changing your "window.alert()"s to just "alert()" - I always use it this way because it's shorter and the "window." part isn't necessary, but "window.alert()" is not wrong, so I'm not sure why it's balking at that either.

Also, sorry I didn't catch it before, but the "length" property applies to the value of your form fields, not to the field itself, as your script is currently trying to do... so, change any .length lines to look like this:

Code:

---

document.forms[0].post.value.length

---

Adding the value reference fixed problem.

I've put my javascript in an external file and referenced it with a link

Code:

---

<script type="text/javascript" src="forms.js"></script>

---

I also have a external file called form processor referenced with link

Code:

---

form action="FormProcessor2.html" method="get" onsubmit="return checkInputs();" onreset="return confirmReset();">

---

However, now I don't get the warning if fields are empty. It goes right to the form processor and displays what was in the fields, even when they are empty. The reset button is funtioning but I'm not sure why the checkInputs() function isn't? Any ideas on what I'm missing?

There may be an error in your Javascript somewhere - even syntax errors which are unrelated to the function you're trying to call can cause Javascript to abort and let the browser go with its default action: submitting the form.

Could you post the latest version of your Javascript?

Sure..thanks for looking at it. I left the window.alerts as they were.

Code:

---

function checkInputs() {
                if (document.forms[0].address.value == "" || document.forms[0].city.value == ""  ||
                        document.forms[0].state.value == "" || document.forms[0].country.value == "" ||
                    document.forms[0].post.value == "" || document.forms[0].phone.value == "" ){
                                        window.alert('Missing data');
                                        return false;}



            if(document.forms[0].post.value.length !=5 )
              { window.alert('Not a valid United States Postal Code \nPostal code should have five digits');
            return false;}


                        if(document.forms[0].phone.value.length !=10 )
              { window.alert('Not a valid United States phone number \nPhone number should have 10 digits');
            return false;}


                          { window.alert('All fields successfully entered');
                        return true;
                        }

                        }


        function confirmReset() {
                        var resetForm = window.confirm('Are your sure you want to reset this form?');
                        if (resetForm == true){
                                return true;}
                        return false;
                }

---

Hmm, this part looks odd to me:

Code:

---

{window.alert('All fields successfully entered');
return true;
}

---

...in that you don't need the curly braces around it.

However, I added your script to some HTML and it works alright for me (I get the "missing data" alerts properly if any input is empty). Sooo... could you post your HTML as well? :)

Sure..again thanks for looking at it.

Code:

---

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
 
 
      <title>Forms</title>
         
           
  <script type="text/javascript" src="forms.js"></script>
         
         
  <link href="forms.css" rel="stylesheet" type="text/css" />

   
  </head>
  <body>

          <h2>Working with forms in Javascript to validate input</h2>

 
       
        <!-- The form data will be submitted to "FormProcessor2.html" -->
        <form action="FormProcessor2.html" method="get" onsubmit="return checkInputs();" onreset="return confirmReset();">

 
        <div id="information">
                 
                  <p>
                  Street<b>:</b> <br/>
          <input type="text" name="street" size="50" />
                  </p>
           
          <p>
                  City<b>:</b> <br/>
          <input type="text" name="city" size="25" />
                  </p>
             
          <p>
                  State<b>:</b> <br/>
          <input type="text" name="state" size="2" />
                  </p>
         
          <p>
                  Country<b>:</b> <br/>
          <input type="text" name="country" size="15" />
                  </p>
             
          <p>
                  Postal Code<b>:</b> <br/>
          <input type="text" name="post" size="5" />
                  </p>
       
                  <p>
                  Phone #<b>:</b> <br/>
                  <input type="text" name="phone" size="10" />
   
          <p>
                  <input type="submit" value="Submit" /> <input type="reset" />
                  </p>
                 
                <div>
                 
    </form>
  </body>

</html>

---

Problem is here:

Code:

---

if (document.forms[0].address.value == ""

---

There is no field in your form named "address", so Javascript is aborting when it tries to find and check it. Change it to "street" (or change your "street" input to "address") and it works as expected.

SambaNeko, Thanks, I didn't catch that. It was really bugging me that I couldn't get it to work. Again, thanks.