Solved

Check to ensure form fields are entered?

Posted on 2012-04-06
7
390 Views
Last Modified: 2012-04-06
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>
0
Comment
Question by:evibesmusic
  • 4
  • 3
7 Comments
 
LVL 18

Assisted Solution

by:Sudaraka Wijesinghe
Sudaraka Wijesinghe earned 500 total points
Comment Utility
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
 

Author Comment

by:evibesmusic
Comment Utility
@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
 

Author Comment

by:evibesmusic
Comment Utility
@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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 18

Accepted Solution

by:
Sudaraka Wijesinghe earned 500 total points
Comment Utility
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
 

Author Closing Comment

by:evibesmusic
Comment Utility
@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
 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
Comment Utility
Glad I could help. Thanks for the points, and good luck with the coding.
0
 

Author Comment

by:evibesmusic
Comment Utility
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

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now