Combine Functions for Form Validation

Hi,
I’ve got 2 javascript functions which I want to execute when I submit a form. Both work fine individually but I don’t know how to execute all of them together. How do I execute all of them? My functions are as follows:

[code]

function validate()
{
if( document.form6.Text_Box_1.value == “” )
{
alert( “Please provide your name!” );
document.form6.Text_Box_1.focus() ;
return false;
}
if( document.form6.Text_Box_1.value.length < 4 )
{
alert( “Your name has to be at least 4 characters long” );
document.form6.Text_Box_1.focus() ;
return false;
}

if( document.form6.Text_Box_2.value == “” )
{
alert( “Please provide your phone number!” );
document.form6.Text_Box_2.focus() ;
return false;
}
if( document.form6.Text_Box_2.value.length < 8 )
{
alert( “Your phone number has to be at least 8 characters long” );
document.form6.Text_Box_2.focus() ;
return false;
}

if( document.form6.Text_Box_3.value == “” )
{
alert( “Please provide your NRIC number!” );
document.form6.Text_Box_3.focus() ;
return false;
}
if( document.form6.Text_Box_3.value.length < 8 )
{
alert( “Your NRIC number must be at least 8 characters long” );
document.form6.Text_Box_3.focus() ;
return false;
}

if( document.form6.Text_Box_4.value == “” )
{
alert( “Please enter your Address!” );
document.form6.Text_Box_4.focus() ;
return false;
}
if( document.form6.Text_Box_4.value.length < 12 )
{
alert( “Your Address must be at least 12 characters long” );
document.form6.Text_Box_4.focus() ;
return false;
}

if( document.form6.Text_Box_5.value == “” )
{
alert( “Please enter your Gender!” );
document.form6.Text_Box_5.focus() ;
return false;
}
if( document.form6.Text_Box_5.value.length < 3 )
{
alert( “Your Gender must be at least 3 characters long” );
document.form6.Text_Box_5.focus() ;
return false;
}

if( document.form6.Text_Box_6.value == “” )
{
alert( “Please enter your Race!” );
document.form6.Text_Box_6.focus() ;
return false;
}
if( document.form6.Text_Box_6.value.length < 4 )
{
alert( “Your Race must be at least 4 characters long” );
document.form6.Text_Box_6.focus() ;
return false;
}

return( true );
}[/code]
In this case I want to execute validateClassifiedEmail and validate. My form code is:

<form name="form6" method="POST" action="" onSubmit="return(validate());">

Thanks for your advice.

You can do this by removing the onSubmit attribute from the form tag, and instead assigning a JavaScript function to the form onsubmit event. That function can then easily contain both of the function calls that you want to make.

For example:

<form id="form6" method="POST" action="">

Note: I’m using a unique identifier to target the form. Name attributes on the form tag have long since been deprecated to ensure that names are only used on form fields that will be submitted.

document.getElementById('form6').onsubmit = function () {
    var form = this;
    validateClassifiedEmail(form);
    return validate();
}

You may though want to only validate if the classified email check is successful.

document.getElementById('form6').onsubmit = function () {
    var form = this;
    if (validateClassifiedEmail(form) === true) {
      return validate();
    }
};
2 Likes

Thanks for your reply, Paul.

I’ve changed my form script to <form id="form6" method="POST" action=""> Now what do I do (where do I insert) document.getElementById('form6').onsubmit = function () { var form = this; if (validateClassifiedEmail(form) === true) { return validate(); } };
Thank for your guidance.

The best place for scripts is at the end of the body, just before the tag.

For example:

<body>
    ...
    <script type="text/javascript" src="js/giveThisScriptASuitableName.js"></script>
</body>
</html>

Sorry, this didn’t work. I saved the code as test.js and put it in my root directory. The code that I included into my web page was <script type="text/javascript" src="test.js"></script> Nothing happened…

Did you put the script code inside of test.js

You mean like this?<script language="javascript"> document.getElementById('form6').onsubmit = function () { var form = this; if (validateClassifiedEmail(form) === true) { return validate(); } }; </script>
Yes I did. It made no difference. Nothing worked…

Referenced Javascript files should not have the HTML tags in them

Just to clarify - the .js file must not contain any HTML code.

The test.js file needs to have only JavaScript code within it, which in this case would is the following:

document.getElementById('form6').onsubmit = function () {
    var form = this;
    if (validateClassifiedEmail(form) === true) {
      return validate();
    }
};

Then within the HTML code code you place the script tag that references the test.js file.

<body>
    ...
    <script type="text/javascript" src="js/test.js"></script>
</body>
</html>

Thanks for your reply.

The .js file has got only one code in it, which is is:

document.getElementById('form6').onsubmit = function () { var form = this; if (validateClassifiedEmail(form) === true) { return validate(); } }; I’ve tried the above mentioned code with & without the html tag <script language="javascript">. It made no difference.

In the body, I’ve tried both <script type="text/javascript" src="js/test.js"></script> and <script type="text/javascript" src="/test.js"></script>. It made no difference too.

Instead of wasting time trying to write the code from scratch, Is there some sort of .js file available with a set of pre-determined validation rules which I can insert into my webpage, do some minor configuration based on my form name and get it working?

Thanks.

Personally i’d use php to validate forms - safer and more secure to your site being hacked.

Take a look at this nice example

You have to do that anyway.

The JavaScript validation is for the convenience of the person who filled out the form.

The OP is having problems with the most basic step in using JavaScript - attaching the JavaScript file to the HTML file so that the JavaScript will run. No matter what script we provide it still will not work until that problem gets fixed.

From the look of things it is probably a file location problem where the OP is using a script tag looking in one location while the file has been placed somewhere else and so can’t be found.

1 Like

I’m assuming you’ve saved the test.js in the js folder on your root?

Yes, test.js is located in my root directory. Thanks.

So what you need to access it there is:

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

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.