Forms - How to check for all required fields are filled out
Moderator: General Moderators
Forms - How to check for all required fields are filled out
I have a form that I have on form.php and then processed on process.php
I want to have the form, check for all the fields that are requied to be filled before "submit" on form.php . So when they hit submit, a pop up should come up warning them that "such and such" isn't filled out and press "ok".
What would be the code for it?
also, I want to "clear" the fields of the form, should a visitor press the "back" button after submit.
I want to have the form, check for all the fields that are requied to be filled before "submit" on form.php . So when they hit submit, a pop up should come up warning them that "such and such" isn't filled out and press "ok".
What would be the code for it?
also, I want to "clear" the fields of the form, should a visitor press the "back" button after submit.
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
This is a Client-Side question. You are going to want to use JavaScript to check the information if you want to achieve what you are asking. You can do this with PHP, but the checking comes after the form is posted.
Search the "client-side" forums here for form field validation and see if anything comes up.
Search the "client-side" forums here for form field validation and see if anything comes up.
Here you go:
Code: Select all
<form method="post" action="register.php" onSubmit="return validate(this)">
<table width="420">
<tr><td>Login name:</td><td> <input type="text" name="uname" id="uname"></td></tr>
<tr><td>Username:</td><td> <input type="text" name="name"></td></tr>
<tr><td><input type="submit" name="submit" value="Send"></td><td></td></tr>
</table>
</form>
<script>
function validate(thisform){
var isvalid = true;
if(thisform.uname.value.length <3){
alert("At least 3 characters please");
isvalid = false
thisform.uname.focus();
}
if(isvalid){
var re = /^[a-zA-Z0-9]+$/;
if(!re.test(thisform.uname.value)){
alert("Only numbers and characters please");
isvalid = false
thisform.uname.focus();
}
}
if(thisform.name.value.length <3){
alert("At least 3 characters please");
isvalid = false
thisform.uname.focus();
}
return isvalid;
}
</script>
Last edited by eyespark on Fri Feb 03, 2006 4:43 pm, edited 1 time in total.
- John Cartwright
- Site Admin
- Posts: 11470
- Joined: Tue Dec 23, 2003 2:10 am
- Location: Toronto
- Contact:
Thanks for the code, but its not working. Its still processing the form. no warnings come upeyespark wrote:Here you go:
Code: Select all
<form method="post" action="register.php" onSubmit="return validate(this)"> <table width="420"> <tr><td>Login name:</td><td> <input type="text" name="uname" id="uname"></td></tr> <tr><td>Username:</td><td> <input type="text" name="name"></td></tr> <tr><td><input type="submit" name="submit" value="Send"></td><td></td></tr> </table> </form> <script> function validate(thisform){ var isvalid = true; if(thisform.uname.value.length <3){ alert("At least 3 characters please"); isvalid = false thisform.uname.focus(); } if(isvalid){ var re = /^[a-zA-Z0-9]+$/; if(!re.test(thisform.uname.value)){ alert("Only numbers and characters please"); isvalid = false thisform.uname.focus(); } } if(thisform.name.value.length <3){ alert("At least 3 characters please"); isvalid = false thisform.uname.focus(); } return isvalid; } </script>
how would I set it up to check "select" boxes that have a "default" value?
that snippet allows for values to be set, it only checks to see if the field values are less than three.
what you really shoud do is build an array of the fields you want checked, then loop over the array and check to see if the value is set...at all.
if not, append some text to a string and then alert the string when it's done.
what you really shoud do is build an array of the fields you want checked, then loop over the array and check to see if the value is set...at all.
if not, append some text to a string and then alert the string when it's done.
I'm thinking you won't understand what I meant in that last post...so I just wrote something up for you
tested...
tested...
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script>
var reqfields = Array("somefield","somefield2");
function checkIt()
{
var msg = "You are missing required information. The information you're missing is listed below \n\n";
for(var i=0;i<reqfields.length;i++)
{
theField = document.MyForm[reqfields[i]];
if(theField.value == "")
msg += "You are missing info for field "+i+" \n";
}
if(msg.length > 90)
{
alert(msg);
return false;
}
return true;
}
</script>
</head>
<body>
<form name="MyForm" onSubmit="return checkIt()">
<input type="text" name="somefield"><br>
<select name="somefield2">
<option value=""></option>
<option value="1">1</option>
</select><br>
<input type="submit" value="go">
</form>
</body>
</html>This is for your original code posted earlier:
I narrowed it down to why it was submitting anyway, and it has to do with this:
For a reason, I dont know, this is not "working" and is submitting the form (ignoring the rest of the form if the fields are left blank).
I narrowed it down to why it was submitting anyway, and it has to do with this:
Code: Select all
if(isvalid){
var re = /^[a-zA-Z]+$/;
if(!re.test(thisform.Firstname.value)){
alert("Only letters for your first name please");
isvalid = false
thisform.Firstname.focus();
}for the above, it returns numbers instead of the field names.Burrito wrote:I'm thinking you won't understand what I meant in that last post...so I just wrote something up for you![]()
tested...Code: Select all
msg += "You are missing info for field "+i+" \n";
ie You missing infor for field 0, You missing infor for field 1, You missing infor for field 2, etc
And I also like to check for unwanted characters, etc (like it tried to do with your first example)
yeah, it just returns the iteration in the loop.
I'm trying to promote some thought on his / her part.
s/he'd have to add something to array delimited by some set of chars then split that set of chars to display what is missing
ex:
then in the loop
I'm trying to promote some thought on his / her part.
s/he'd have to add something to array delimited by some set of chars then split that set of chars to display what is missing
ex:
Code: Select all
var reqfields = Array("somefield::Field 1","somefield2::Field 2");Code: Select all
reqfields = reqfields.split("::");
// now has an array with key 1 being the missing field infoWhere in the loop? I've placed it after almost every line in the for... and it ends up making the form submit (overrides the check).Burrito wrote:yeah, it just returns the iteration in the loop.
then in the loop
Code: Select all
reqfields = reqfields.split("::"); // now has an array with key 1 being the missing field info
here:
untested...
untested...
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script>
var reqfields = Array("somefield::Field Number 1","somefield2::Field Number 2");
function checkIt()
{
var msg = "You are missing required information. The information you're missing is listed below \n\n";
for(var i=0;i<reqfields.length;i++)
{
thStuff = reqfields[i].split("::");
thText = thStuff[1];
thName = thStuff[0];
theField = document.MyForm[thName];
if(theField.value == "")
msg += thText+" Is Missing required information blah blah blah \n";
}
if(msg.length > 90)
{
alert(msg);
return false;
}
return true;
}
</script>
</head>
<body>
<form name="MyForm" onSubmit="return checkIt()">
<input type="text" name="somefield"><br>
<select name="somefield2">
<option value=""></option>
<option value="1">1</option>
</select><br>
<input type="submit" value="go">
</form>
</body>
</html>