Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 401
  • Last Modified:

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>
0
evibesmusic
Asked:
evibesmusic
  • 4
  • 3
2 Solutions
 
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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
 
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now