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>
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>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
@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.backg
alert('You must provide a Background statement.');
return false;
}
return true;
}
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.backg
alert('You must provide a Background statement.');
return false;
}
return true;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
@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!
Glad I could help. Thanks for the points, and good luck with the coding.
ASKER
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
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.genera
!(document.bio_form.onesto
!(document.bio_form.qualit
!(document.bio_form.relati
!(document.bio_form.thanky
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.backg
alert('You must provide a Background statement.');
return false;
}
return true;
}
function validate(){
//TEST TO SEE IF AT LEAST ONE FACILITY HAS BEEN SELECTED
if(!(document.bio_form.amc
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.genera
!(document.bio_form.onesto
!(document.bio_form.qualit
!(document.bio_form.relati
!(document.bio_form.thanky
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.backg
alert('You must provide a Background statement.');
return false;
}
return true;
}
ASKER
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?