Check to ensure form fields are entered?

Hi Experts,

I have several form fields that I'd like to validate before submitting my form data.  If the validation does not pass inspection an alert should be thrown and the form should not be submitted.

I assume that this is best done using a javascript function that is called upon click of the submit button but, I am not sure how to write it? Can anyone offer some help?

This is what I need to validate:

<form id="bio_form" method="post" name="bio_form" >

//At least one of the following radio buttons needs to be selected:
<input type="radio" name="greeting" value="1" />
<input type="radio" name="greeting" value="2" />
<input type="radio" name="greeting" value="3" />
<input type="radio" name="greeting" value="4" />
<input type="radio" name="greeting" value="5" />

//At least one of the following checkboxes needs to be selected:
<input type="checkbox" name="site1" value="1" />
<input type="checkbox" name="site2" value="1" />
<input type="checkbox" name="site3" value="1" />
<input type="checkbox" name="site4" value="1" />
<input type="checkbox" name="site5" value="1" />
<input type="checkbox" name="site6" value="1" />
<input type="checkbox" name="site7" value="1" />

//The following text input needs to have some data:
<input type="text" name="background" value="" />

<input type="submit" id="submit" name="submit" value="submit" onsubmit="validate()" />

</form>
evibesmusicAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Sudaraka WijesingheWeb Application ProgrammerCommented:
Try this:
.
.
.
<script type="text/javascript" language="JavaScript">
//<![CDATA[

function validate(the_form) {
	// Do your validation here.
	// You can use the_form.element_id to access the form elements

	// If validation passed function should return true, and it will submit the form
	// Otherwise return false to stop the form from submitting
}

//]]>
</script>
.
.
.
<form id="bio_form" method="post" name="bio_form" onsubmit="return validate(this);">
.
.
.
</form>
.
.
.

Open in new window


P.S.
I assume/suggest that you do the same validation again on server side with the data as a fallback, because if one can get pass the client side validation simply by disabling JavaScript on the browser.
0
evibesmusicAuthor Commented:
@sudaraka:

Can you explain why it is better (or why you would use) the onsubmit event inside the form tag versus using the onclick event within the submit button tag?
0
evibesmusicAuthor Commented:
@sudaraka:

OK...I've implemented a script to just check that the "background" field contains data.  The script produces the alert message when nothing is entered into the background field.

The problem now is that the form is submitted even though the validation does not pass the test.

//I placed the following script within the HEAD of my document.  Is that the correct location to place the code?

function validate(){
      if(document.bio_form.background.value == ""){
            alert('You must provide a Background statement.');
            return false;
      }
      return true;
}
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Sudaraka WijesingheWeb Application ProgrammerCommented:
Make sure in the form (HTML) you have it like onsubmit="return validate(this);". Please not the return in there, it is important because without it the return value of the function is not passed to the event handler.

Benefits of form.onsubmit over button.onclick is because you are acting on the events of the exact HTML element that you need to control (to submit or not, in this case) of the element.
There are few ways to submit a HTML form (by clicking the submit button, by hitting the return key on any form element, or by calling form.submit() in JavaScript, there maybe more), and when you run the validation on button.onclick, you only cover the first method.
form.onsubmit on the other hand is called in every method just before the form data is submitted to the server, therefore it's the ideal place to make a decision like whether to submit a form or not.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
evibesmusicAuthor Commented:
@sudaraka:<br /><br />Amazing clarity of your explanation.  Thank you so much for explaining the difference and the benefit of using an onsubmit event vs. an onclick event.  One of the best explanations I have ever read/seen on EE!<br /><br />Great job and thanks so much.  I feel confident that I can take it from here.  I will post my final code.<br /><br />Cheers!
0
Sudaraka WijesingheWeb Application ProgrammerCommented:
Glad I could help. Thanks for the points, and good luck with the coding.
0
evibesmusicAuthor Commented:
This is the final version of javascript which now successfully validates my form before submission:

function validate(){
      //TEST TO SEE IF AT LEAST ONE FACILITY HAS BEEN SELECTED
       if(!(document.bio_form.amc.checked) && !(document.bio_form.df.checked) && !(document.bio_form.lvm.checked) && !(document.bio_form.mtz.checked) && !(document.bio_form.pls.checked) && !(document.bio_form.sha.checked) && !(document.bio_form.wcr.checked)){
            alert('You must select at least one Facility.');
            return false;
      }
      
      //TEST TO SEE IF AT LEAST ONE WELCOME MESSAGE HAS BEEN SELECTED
      if(
         !(document.bio_form.general.checked) && 
         !(document.bio_form.onestop.checked) && 
         !(document.bio_form.quality.checked) && 
         !(document.bio_form.relationship.checked) && 
         !(document.bio_form.thankyou.checked)){
            alert('You must select at least one Welcome Message.');
            return false;
      }      
      //TEST TO SEE IF THE BACKGROUND FIELD HAS BEEN FILLED
      if(document.bio_form.background.value == ""){
            alert('You must provide a Background statement.');
            return false;
      }
      return true;
}
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.