Calling functions in "onclick / onsubmit" button

Question

Joemeister 0 Light Poster

15 Years Ago

Hi everyone! I'm really struggling at the moment calling these two functions. The one function checks that all the fields are filled in and the other to validate the date in a certain format. The function that checks all the fields works but when I try to call the second one it stops working.

How can I call both these functions for them to work 100% ? Thanks very much!

Here's the code:

<!DOCTYPE HTML>
<html>
	<head>
                
                <script type="text/javascript">
                    
                    //FIRST FUNCTION

                    function validateForm()
                    {
                    var username=document.forms["myForm"]["username"].value
                    var name=document.forms["myForm"]["name"].value
                    var surname=document.forms["myForm"]["surname"].value
                    
                    //email variables
                    var email=document.forms["myForm"]["email"].value
                    var atpos=email.indexOf("@");
                    var dotpos=email.lastIndexOf(".");
                    
                    //password variables
                    var password=document.forms["myForm"]["password"].value
                    //gender variables
                    var gender=document.forms["myForm"]["email"].value
                    
                    //username validation
                    if (username==null || username=="")
                      {
                      alert("Please enter your username");
                      return false;
                      }
                    
                    //name validation
                    else if (name==null || name=="")
                      {
                      alert("Please enter your name");
                      return false;
                      }
                    
                    //surname validation
                    else if (surname==null || surname=="")
                      {
                      alert("Please enter your surname");
                      return false;
                      }
                    
                    //email validation
                    else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length)
                      {
                      alert("Please enter a valid email address");
                      return false;
                      }
                    
                    //password validation
                    else if (password==null || password=="")
                      {
                      alert("Please enter your password");
                      return false;
                      }
                      
                    //gender validation
                    else if ( ( document.myForm.gender[0].checked == false ) && ( document.myForm.gender[1].checked == false ) )
                        {
                            alert ( "Please choose your Gender: Male(M) or Female(F)" );
                            return false;
                        }
                    }
                </script>

                //SECOND FUNCTION

                <script type="text/javascript">
                        //date validation
                        function checkdate(input){

                        var validformat = /^\d{2}\/\d{2}\/\d{4}$/ //Basic check for format validity
                        var returnval = false

                        if (!validformat.test(input.value))
                            alert("Please enter the date in this format: dd/mm/yyyy.")
                        else{ 
                            //Detailed check for valid date ranges
                            var dayfield=input.value.split("/")[0]
                            var monthfield=input.value.split("/")[1]
                            var yearfield=input.value.split("/")[2]
                            var dayobj = new Date(yearfield, monthfield-1, dayfield)

                        if ((dayobj.getDate()!=dayfield)||(dayobj.getMonth()+1!=monthfield)||(dayobj.getFullYear()!=yearfield))
                            alert("Invalid Day, Month, or Year range detected.")
                        else
                            returnval = true
                        }
                        if (returnval == false) input.select()
                            return returnval
                        }


                </script>
	</head>
	<body>
              <center>
                  <table cellpadding="1" cellspacing="1">
                      <tr>
                           <td>
                               <center>
                                    <h1>Please enter the following info:</h1>
                                    
                                    <!-- HERE IS THE FUNCTIONS I DON'T KNOW HOW TO CALL -->

                                    <form name="myForm" action="display.php" onsubmit="return checkdate(this.php_date); return validateForm(); " method="post">
                                        
                                            <table border="0" bgcolor="gray" cellpadding="1" cellspacing="1">
                                                    <tr>
                                                            <td>Username: </td><td><input type="text" name="username" placeholder="Enter your username"/></td>
                                                    </tr>
                                                    <tr>
                                                            <td>Name: </td><td><input type="text" name="name" placeholder="Enter your name"/></td>
                                                    </tr>
                                                    <tr>
                                                            <td>Surname: </td><td><input type="text" name="surname" placeholder="Enter your surname"/></td>
                                                    </tr>
                                                    <tr>
                                                            <td>E-mail: </td><td><input type="email" name="email" placeholder="Enter your email address"/></td>
                                                    </tr>
                                                    <tr>
                                                            <td>Password: </td><td><input type="password" name="password" placeholder="Enter your password"/></td>
                                                    </tr>
                                                    <tr>
                                                            <td>Date of birth (dd/mm/yyyy) </td><td><input type="text" name="php_date"/></td>
                                                    </tr>
                                                        <tr>
                                                                <td><input type="radio" name="gender" value="M" />  M  <input type="radio" name="gender" value="F" />  F</td>
                                                        </tr>
                                                    <tr>
                                                            <td><input type="submit" value="Submit" /></td>
                                                    </tr>
                                            </table>
                                    </form>
                                </center>
                            </td>
                      </tr>
                  </table>
              </center>
	</body>
</html>

javascript

2 Contributors
1 Reply
603 Views
10 Hours Discussion Span
Latest Post 15 Years Ago Latest Post by Airshow

Dani AI

Generated 10 Months Ago

— is right: a return immediately exits the onsubmit handler, so putting two return statements one after the other means only the first runs. There are two simple ways to make both validations run and produce a single boolean result.

Use a small wrapper that calls both validators, then return its result from the form. This guarantees both functions run (so the user can see all errors) and keeps markup tidy:

function validateAll(form){
  var ok1 = validateForm();                         // runs first validator
  var ok2 = checkdate(form.elements['php_date']);   // runs second validator
  return ok1 && ok2;                                // true only if both passed
}

/* in the form: onsubmit="return validateAll(this)" */

A more modern and cleaner approach is to keep JS out of the HTML and attach a submit listener. This also makes it easy to call preventDefault() when validation fails:

document.addEventListener('DOMContentLoaded', function(){
  var f = document.forms['myForm'];
  f.addEventListener('submit', function(e){
    var ok1 = validateForm();
    var ok2 = checkdate(f.elements['php_date']);
    if (!ok1 || !ok2) e.preventDefault(); // stop submit when either fails
  }, false);
});

Troubleshooting notes: make sure checkdate expects an input element (so pass form.elements['php_date'], not the string value). Avoid using bitwise & for logical checks; use &&. If you want short-circuit behavior (skip the second check when the first fails) you can use return validateForm() && checkdate(...), but that will not run the second validator when the first returns false. Double-check small typos in your validation code (radio/name references, unused vars) and use the browser console to see errors.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Airshow 425 WiFi Lounge Lizard Team Colleague · Answer 1 · 2011-08-01T04:16:01+00:00

Joemeister,

Here's a big clue:

<form ..... onsubmit="return checkdate(this.php_date); return validateForm();>

validateForm will not execute regardless of whether checkdate returns true or false.

Airshow