Form question (Required fields)

[faisj]

I guys,

I have this as code on the moment:

<p>Get your tickets:<br>
<FORM action="script.php" method="post" name="form">
	Naam: 
	<INPUT name="name" size="10" style="BACKGROUND-COLOR: #FFFFFF; BORDER-BOTTOM: #F383A9 1px solid; BORDER-LEFT: #F383A9 1px solid; BORDER-RIGHT: #F383A9 1px solid; BORDER-TOP: #F383A9 1px solid; FONT-FAMILY: Arial; Helvetica; Microsoft Sans Serif; FONT-SIZE: 8pt; HEIGHT: 18px; WIDTH: 100px;" value="" /><br />
	Aantal kaarten: 
	<INPUT name="amountoftickets" size="10" style="BACKGROUND-COLOR: #FFFFFF; BORDER-BOTTOM: #F383A9 1px solid; BORDER-LEFT: #F383A9 1px solid; BORDER-RIGHT: #F383A9 1px solid; BORDER-TOP: #F383A9 1px solid; FONT-FAMILY: Arial; Helvetica; Microsoft Sans Serif; FONT-SIZE: 8pt; HEIGHT: 18px; WIDTH: 20px;" value="" /><br />
	E-mail adres: <INPUT name="email" size="10" style="BACKGROUND-COLOR: #FFFFFF; BORDER-BOTTOM: #F383A9 1px solid; BORDER-LEFT: #F383A9 1px solid; BORDER-RIGHT: #F383A9 1px solid; BORDER-TOP: #F383A9 1px solid; FONT-FAMILY: Arial; Helvetica; Microsoft Sans Serif; FONT-SIZE: 8pt; HEIGHT: 18px; WIDTH: 100px;" value="" /><br />
	Mobiel nummer: <INPUT name="mobilenr" size="10" style="BACKGROUND-COLOR: #FFFFFF; BORDER-BOTTOM: #F383A9 1px solid; BORDER-LEFT: #F383A9 1px solid; BORDER-RIGHT: #F383A9 1px solid; BORDER-TOP: #F383A9 1px solid; FONT-FAMILY: Arial; Helvetica; Microsoft Sans Serif; FONT-SIZE: 8pt; HEIGHT: 18px; WIDTH: 80px;" value="" /><br /> 
	<p align=right><input type="image" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('submit','','images/submit_over.gif',1)" src="images/submit_up.gif" name="submit" style="width: 49px; height: 18px; border: 0;" align="absmiddle"></a></p>

</p>

2 things i wanted to have.

in the email form the script should check if a "@" is entered in the field
this way i know for sure people will enter a email address there

At Mobiel nummer (mobile number) I want to have a check that the
person entered 10 digits like: 0612345678

when they did not enter the info correct they should get a
popup that they have to fill it in before it can be send.

could someone help me with this.

thanks in advance.

kind regards,

Faisj

 

[Eric]

PHP

<?php

// All digits
if (!preg_match('#[0-9]{10}#', $_POST['mobilenr']))
{
    echo 'Invalid mobile number.';
}
else if (!preg_match('#^[a-z0-9.!\#$%&\'*+-/=?^_`{|}~]+@([0-9.]+|([^\s\'"<>]+\.+[a-z]{2,6}))$#si', $_POST['email']))
{
    echo 'Invalid email.';
}
else
{
    //etc
}

?>

 

[faisj]

Dear SecondVersion,

Thanks! But, where should I add this piece of code?

kind regards,

Faisj

 

[Dan]

His code is set up to be placed in script.php-

You would replace the line "//etc" with most [if not all] of your current script.php.

 

[Eric]

^ correct. I'd have to see your "script.php" - to help you any further..

 

[faisj]

Cant it open in a javascript popup i have seen that on other sites.
they do the check by java and before the data is send to script.php
the html performs the check

something like this
http://www.javascriptkit.com/script/script2/acheck.shtml
intergrated in the code i provided.

np$'s will be donated!

 

[Eric]

Here's the JS you provided integrated with your form. If you can find the JS to check for mobilenr, I can do that too..

<script language="JavaScript1.2">

//Advanced Email Check credit-
//By JavaScript Kit (http://www.javascriptkit.com)
//Over 200+ free scripts here!

var testresults
function checkemail(){
var str=document.form1.email.value
var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i
if (filter.test(str))
testresults=true
else{
alert("Please input a valid email address!")
testresults=false
}
return (testresults)
}
</script>

<script>
function checkbae(){
if (document.layers||document.getElementById||document.all)
return checkemail()
else
return true
}
</script>

 <p>Get your tickets:<br> <FORM action="script.php" method="post" name="form1" onsubmit="return checkbae()">
	Naam: 
	<INPUT name="name" size="10" style="BACKGROUND-COLOR: #FFFFFF; BORDER-BOTTOM: #F383A9 1px solid; BORDER-LEFT: #F383A9 1px solid; BORDER-RIGHT: #F383A9 1px solid; BORDER-TOP: #F383A9 1px solid; FONT-FAMILY: Arial; Helvetica; Microsoft Sans Serif; FONT-SIZE: 8pt; HEIGHT: 18px; WIDTH: 100px;" value="" /><br />
	Aantal kaarten: 
	<INPUT name="amountoftickets" size="10" style="BACKGROUND-COLOR: #FFFFFF; BORDER-BOTTOM: #F383A9 1px solid; BORDER-LEFT: #F383A9 1px solid; BORDER-RIGHT: #F383A9 1px solid; BORDER-TOP: #F383A9 1px solid; FONT-FAMILY: Arial; Helvetica; Microsoft Sans Serif; FONT-SIZE: 8pt; HEIGHT: 18px; WIDTH: 20px;" value="" /><br />
	E-mail adres: <INPUT name="email" size="10" style="BACKGROUND-COLOR: #FFFFFF; BORDER-BOTTOM: #F383A9 1px solid; BORDER-LEFT: #F383A9 1px solid; BORDER-RIGHT: #F383A9 1px solid; BORDER-TOP: #F383A9 1px solid; FONT-FAMILY: Arial; Helvetica; Microsoft Sans Serif; FONT-SIZE: 8pt; HEIGHT: 18px; WIDTH: 100px;" value="" /><br />
	Mobiel nummer: <INPUT name="mobilenr" size="10" style="BACKGROUND-COLOR: #FFFFFF; BORDER-BOTTOM: #F383A9 1px solid; BORDER-LEFT: #F383A9 1px solid; BORDER-RIGHT: #F383A9 1px solid; BORDER-TOP: #F383A9 1px solid; FONT-FAMILY: Arial; Helvetica; Microsoft Sans Serif; FONT-SIZE: 8pt; HEIGHT: 18px; WIDTH: 80px;" value="" /><br /> <p align=right><input type="image" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('submit','','images/submit_over.gif',1)" src="images/submit_up.gif" name="submit" style="width: 49px; height: 18px; border: 0;" align="absmiddle"></a></p> </p>

 

[faisj]

The mobile number has to be only checked only if there are 10 numbers entered.

Ps. i tried the script but i can still enter a invalid email address : (

 

[Dan]

<script type="text/javascript">
function checkform () {
	var mobilenr = document.form.mobilenr.value;
	
	if (mobilenr.length != 10) { 
		alert("Your mobile number needs to be 10 digits long."); 
		var errors = true; 
	}

	var email = document.form.email.value;
	var regex = new RegExp(/[_a-zA-Z0-9\.-]+\@[_a-zA-Z0-9\.-]{2,6}(\.[_a-zA-Z0-9\.-]{2,6})?/);
	
	if (email.match(regex)) {
	} else {
		alert("You must enter a valid email address."); 
		var errors = true; 
	}
	if (errors) return false;
	else return true;
}
window.onload = function () {
	document.form.submit.onmouseout = function () {
		document.form.submit.style.background = "url('images/submit_over.gif') 0 0 no-repeat;";
	}
	document.form.submit.onmouseover = function () {
		document.form.submit.style.background = "url('images/submit_up.gif') 0 0 no-repeat;";	
	}
}
</script>
<style type="text/css">
.input {
	BACKGROUND-COLOR: #FFFFFF; 
	BORDER-BOTTOM: #F383A9 1px solid; 
	BORDER-LEFT: #F383A9 1px solid; 
	BORDER-RIGHT: #F383A9 1px solid; 
	BORDER-TOP: #F383A9 1px solid; 
	FONT-FAMILY: Arial, Helvetica, Microsoft Sans Serif; 
	FONT-SIZE: 8pt; 
	HEIGHT: 18px; 
	WIDTH: 100px;
}
</style>

<p>Get your tickets:<br>
<FORM action="script.php" onsubmit="return checkform();" method="post" name="form">
	Naam: 
		<INPUT name="name" size="10" class="input" value="" /><br />
	Aantal kaarten: 
		<INPUT name="amountoftickets" size="10" class="input" value="" /><br />
	E-mail adres: 
		<INPUT name="email" size="10" class="input" value="" /><br />
	Mobiel nummer: 
		<INPUT name="mobilenr" size="10" class="input" value="" /><br />
	<p align=right>
		<input type="submit" value="" name="submit" style="background: url('images/submit_up.gif') 0 0 no-repeat; width: 49px; height: 18px; border: 0;" align="absmiddle">
	</p>
</p>

I edited the submit button code a little.. tell me if it's picture loads right.

 

[faisj]

Dan you are great!!!!

NP$'s send to Dan & SecondVersion

Thanks guys!!

 

[Joe]

resolved

Joe