Page 1 of 1
Validating a form before sending it
Posted: Fri Jan 14, 2011 2:32 pm
by danwguy
I was wondering if there is a way I can use php and regex to validate something before I send it off to the next page. Something like this...
Code: Select all
<form action="credit-app-submit.php" method="post" name="creditapp" id="creditapp">
// all the form data here, the important on I want to validate is...
<input name="StreetAddress" type="text" maxlength="30" size="30" />
<input type="submit" value="Submit Application" class="submit" />
Then somewhere below that I want to use something like...
Code: Select all
<?php
$addy = $_GET['StreetAddress']; //not sure if I would use $_GET here but I think that's right
if(!preg_match('/^[0-9]/', $addy)) {
echo "<script language='javascript'>alert('Incorrect address, please use a valid numerical street address and rety')</script>
}else{
//I need the code that I would put here to submit the form if the preg_match matches
}
?>
I hope what I am saying makes sense and I don't look like a rambling retard. Please let me know if this is possible or if I have to submit the form, then check the addy, then if it doesn't match pop a message and put a back link on the page for them to try again. Thank you for the help.
Re: Validating a form before sending it
Posted: Sat Jan 15, 2011 9:40 am
by cpetercarter
You can check the validity of form data either in the browser (before the form data is sent) or on the server (after the data has been sent). There is a lot of sense in the first of these - why send invalid data over the internet to the server if javascript can check the data on the browser? However, it is possible that some of your users will not have javascript enabled in their browsers, and if you anticipate that this might be a problem, you may want to have a backup check on the server also.
If you google "javascript form validation" you will find loads of examples. The normal method is to attach a javascript routine to the "onsubmit" event for the form.
In your case, you have specified that the form should send its data as POST data, so you need $_POST['streetAddress'] not $_GET['streetAddress']. Also your regex will reject anything which does not start with a numerical character - so it will reject "The White House, Washington DC" and also "Flat 4, 12 Acacia Gardens". Is this what you want?
Re: Validating a form before sending it
Posted: Sat Jan 15, 2011 12:00 pm
by califdon
In addition to what cpetercarter explained, be sure you understand that PHP is server script that is never sent to the browser at all, so it cannot possibly react to anything that the user does. Javascript is client script that is run by the browser (unless it is disabled by the user's browser).
Re: Validating a form before sending it
Posted: Sat Jan 15, 2011 12:45 pm
by danwguy
Essentially I need the script to make sure that the first character in the street address field to be a number and if it's not don't send the form, instead alert them that they need to use a valid numerical address, All of the companies clients are in the US so I am not too worried about the flat 4 address as ours start with the number. I do understand what you are saying though. So you think the best way to do it is to add an onsubmit="validate();" and then add a javascript validation to it before the form is sent off? Would you mind giving me just a quick example of such a script for just the address, also does javascript use RegEx like php does? Sorry if I am asking too much, just really want to learn this stuff and I figure asking is the best way to do it. So if you wouldn't mind a quick little sample of a validate before sending script on that address field. Thank you again for the help, I really do appreciate it.
Re: Validating a form before sending it
Posted: Sat Jan 15, 2011 1:55 pm
by califdon
I'm moving this topic to the Javascript forum.
If you want to validate that the first character of the address is numeric before sending the form data back to the browser, it's not a matter of "the best way," the ONLY way to do it is with Javascript. Regex is supported in Javascript as a method of a string object, but to just do what you described could be done like this:
Code: Select all
...
<head>
<title>xxxxx</title>
<script type='text/javascript'>
function validate_numeric(myid) {
var addy1 = document.getElementById(myid).substr(0,1);
return addy1; // returns the 1st character of whatever was entered in the address field
}
function mysubmit() {
if(validate_numeric()>0) {
document.myform.submit(); // submits the form to the server
} else {
alert("Address not valid!");
document.getElementById("addid").focus();
}
</script>
...
</head>
<body>
...
<form name='myform' method='post' action='whatever.php'>
...
<input type='text' id='addid' name='address' />
...
<input type='button' name='submit' value='Submit' onClick='mysubmit();' />
...
This is untested code, but should illustrate the approach. I wrote 2 Javascript functions, because you might have other validation that you want to do when the user submits the form, so you could call additional functions from the mysubmit() function.
Re: Validating a form before sending it
Posted: Tue Jan 18, 2011 12:09 pm
by danwguy
So am I actually supposed to write the script with the "function validate_numeric(myid);" or should I put in "function validate_numeric("companyAddress");" as the id of the field I am trying to validate is companyAddress? Also the second line "document.getElementById(myid)" should that be "document.getElementById("companyAddress")" as well?
EDIT: ok so I can't even get it to run the onclick event, i did something as simple as this...
Code: Select all
<head>
....
<script type='text/javascript'>
function mysubmit() {
alert("test");
}
</script>
</head>
<body>
....
<form id="frmCreate" name="frmCreate" method="post" action="send-mail.php">
<table>
<tr>
<td>Company Name</td>
<td><input type="text" name="companyName" id="companyName" tabindex="1" /></td>
</tr>
<tr>
<td>Company Address</td>
<td><input type="text" name="companyAddress" id="companyAddress" tabindex="2" /></td>
</tr>
<tr>
<td>Company Phone</td>
<td><input type="text" name="companyPhone" id="companyPhone" tabindex="3" size="10" maxlength="10" />
<br />
<span class="details">no spaces or dashes (eg, 6191230123)</span></td>
</tr>
<tr>
<td>Contact Name</td>
<td><input type="text" name="contactName" id="contactName" tabindex="4" /></td>
</tr>
<tr>
<td>Contact Phone</td>
<td><input type="text" name="contactPhone" id="contactPhone" tabindex="5" size="10" maxlength="10" /><br />
<span class="details">no spaces or dashes (eg, 6191230123)</span></td>
</tr>
<tr>
<td>Contact Email</td>
<td><input type="text" name="contactEmail" id="contactEmail" tabindex="6" /></td>
</tr>
<tr>
<td>Knox Account #<br />
<span class="details">(if you have one)</span></td>
<td><input type="text" name="knoxAccount" id="knoxAccount" tabindex="7" /></td>
</tr>
<tr>
<td> </td>
<td><input name="next" type="image" value="Next" src="../images/button-next.png" alt="Next" onmouseover="this.src='../images/button-next-over.png'" onmouseout="this.src='../images/button-next.png'" align="top" onclick="mysubmit();" /></td>
</tr>
</table>
</form>
</div>
...
and come up with nothing, it will not pop up that alert. Seems like it's not even running the function. Any ideas?
EDIT2: ok so I got it to run that above function and it popped up a box that said test before submitting so I did this...
Code: Select all
<script type='text/javascript'>
function mysubmit() {
var addy = document.getElementById("companyAddress").substr(0,1);
return addy;
alert('value of addy is' + addy);
}
</script>
and now it doens't run anymore. I am so freaking confused, why doesn't that run? Sorry I am kinda terrible with javascript.
Re: Validating a form before sending it
Posted: Tue Jan 18, 2011 2:27 pm
by cpetercarter
The "return" command terminates the function, so the "alert" command is never reached. Reverse the order of these two lines of code.
Re: Validating a form before sending it
Posted: Tue Jan 18, 2011 6:55 pm
by califdon
Yes, with that change, the test should work. The only thing you need to change in my suggested script is "addid", which should be the id name of your address input element (which, of course, I didn't know). Leave the "myid"s alone. It is being declared as a local variable in the line "function validate_numeric(myid)" so that whatever value is passed to the function can be used in the line immediately below that.