How to make several form fields required in php? - javascript

I have this form in the index.php file :
<HTML>
<HEAD>
<TITLE>Contact Page</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<table border="0" cellpadding="0" cellspacing="3">
<form method="post" action="thankyou.php">
<tr>
<td>Name:</td>
<td><input name="name" type="text"></td>
</tr>
<tr><td>Your Browser:</td>
<td>
<select name="Browser">
<option value="Internet Explorer" selected>Internet Explorer
<option value="Mozilla">Mozilla
<option value="Other">Other
</select></td>
</tr>
<tr>
<td>Software you use:</td>
<td><input name="Microsoft Word" type="checkbox" value="yes">Microsoft Word<br>
<input name="Microsoft Excel" type="checkbox" value="yes">Microsoft Excel<br>
<input name="Adobe Photoshop" type="checkbox" value="yes">Adobe Photoshop<br>
</td>
</tr>
<tr>
<td>Age:</td>
<td>
<input name="Age" type="radio" value="10-15">10-15<br>
<input name="Age" type="radio" value="16-20">16-20<br>
<input name="Age" type="radio" value="21-90">21-90<br>
</td>
</tr>
<tr><td>Other Comments:</td>
<td><textarea name="Other Comments" rows=10 cols=30></textarea></td>
</tr>
<tr><td> </td><td><input type="submit" value="Send Message"></td>
</tr></form>
</table>
and this is in my thankyou.php :
<?php
//This command imports the values from contact.php. Please do not touch.
#import_request_variables("gpc");
//The email address the message will be sent to
$youremail = "youremail#yoursite.com";
//The subject of the email you will receive;
$subject = "Our Survey";
//The page your visitor will be redirected to.
$redirect = "http://www.yoursite.com";
//Time until the page redirects your visitor (seconds)
$secs = "5";
//This takes all of the information from the form and sorts it out. Please leave as is.
foreach ($_POST as $name => $value) {
$thetext = $thetext . "$name : $value\n";
}
?>
<HTML>
<HEAD>
<TITLE>Thank you</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<table cellpadding=0 cellspacing=0>
<tr><td>
<?php
//Checks to see if the name field is empty. You can delete or add fields as needed.
if ((!empty($name))) {
$name = stripslashes($name);
$message = stripslashes($message);
//This is where the email is sent using your values from above.
mail("$youremail", "$subject", "$thetext");
?>
<meta http-equiv="refresh" content="<?php = $secs; ?>;URL=<?php = $redirect; ?>">
Thank you, we have recieved your message.
<p>
You are now being redirected to our homepage.
<?php
} else {
?>
We require your name email address and a message in order to reply to your message. Please click here or your browsers back button to try again.
<?php
}
?>
</td></tr>
</table>
I want to make "Your Browser" and/or "Other Comments:" a required field, so if the visitor doesn't fill in at least one of them, he will be redirected to some page which will say, please fill the required fields. If he fills in any of them the form should submit successfully. I know there is some basic editing needed, but unfortunately I'm just learning and couldn't do it myself.
Please help.

Try this:
<HTML>
<HEAD>
<TITLE>Contact Page</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<script>
function validateForm()
{
var x=document.forms["my_form"]["name"].value;
var y=document.forms["my_form"]["comments"].value;
if (x==null || x=="")
{
alert("name must be filled out");
return false;
}
if (y==null || y=="")
{
alert("comments must be filled out");
return false;
}
}
</script>
<table border="0" cellpadding="0" cellspacing="3">
<form method="post" action="thankyou.php" name="my_form" onsubmit="return validateForm()">
<tr>
<td>Name:</td>
<td><input name="name" type="text"></td>
</tr>
<tr><td>Other Comments:</td>
<td><textarea name="comments" rows=10 cols=30></textarea></td>
</tr>
<tr><td> </td><td><input type="submit" value="Send Message"></td>
</tr></form>
</table>
This will validate on the same page, so it will be best.
EDIT:
For only one, try like this:
<HTML>
<HEAD>
<TITLE>Contact Page</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<script>
function validateForm()
{
var x=document.forms["my_form"]["name"].value;
var y=document.forms["my_form"]["comments"].value;
var count = 0;
if (!(x==null || x==""))
{
count++;
}
if (!(y==null || y==""))
{
count++;
}
if(count < 1){
alert("Please fill at least one field");
return false;
}
}
</script>
<table border="0" cellpadding="0" cellspacing="3">
<form method="post" action="thankyou.php" name="my_form" onsubmit="return validateForm()">
<tr>
<td>Name:</td>
<td><input name="name" type="text"></td>
</tr>
<tr><td>Other Comments:</td>
<td><textarea name="comments" rows=10 cols=30></textarea></td>
</tr>
<tr><td> </td><td><input type="submit" value="Send Message"></td>
</tr></form>
</table>
Demo here>>

You can use jquery for validations in html/php forms.Try to include jquery validations in your html code.
All you have to do is just include latest version of jquery and the validate.js from github
and make the drop down list required as follows.
<select name="Browser" required="true">
And that will take care of the things.
you can also explore about validate.js from this link
*Update : *
Also you can use the html5 validations for modern browsers.
<input type="text" name="username" required="required">

Related

ReferenceError: Invalid left-hand side in assignment / form validation

I am very new to html and javascript; I've only been coding a few weeks. I'm trying to create a registration form with validation and am having an issue with this assignment. I was getting the error in the title (left-hand side...) but now my validation function isn't working and I cannot see why.
This is my assignment:
The following are your data validation rules:
Username/Password: Required and has to be at least 8 characters.
First Name/Last Name: Required. No other requirements.
Email: Required.
Phone Number: Optional. However, if user enters a phone number, you must check to make sure that it is in XXX-XXX-XXXX format, where X
are all numbers.
When user clicks on the submit button, your validation logic will run
and display error messages on the screen if there are data issues. If
there are no data issues, you can just use “alert” to print a success
message. Include reset button to clear all form fields and errors.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Registration Form</title>
<link rel = "stylesheet" type="text/css" href = "regStyles.css"/>
<script language="JavaScript">
function validateForm()
{
var userName = document.getElementById('userName').value;
var passWord = document.getElementById('passWord').value;
var lastName = document.getElementById('lastName').value;
var dateBirth = document.getElementById('dateBirth').value;
var email = document.getElementById('email').value;
if (userName == "" || passWord =="" || firstName == "" || lastName == "" || dateBirth == "" || email == "")
{
document.getElementById("error").innerHTML = "Only phone is optional, all other fields are required";
return false;
}
else if (userName.length<8)
{
document.getElementById("error").innerHTML = "Username must be at least 8 characters.";
}
else if (passWord.length<8)
{
document.getElementById("error").innerHTML = "Password must be at least 8 characters.";
}
else
{
return true;
}
}
</script>
</head>
<body>
<form name = "registration" id = "registration" action="submission.html" method="post" onsubmit="return validateForm();">
<h1>Registration</h1>
<span id="error" style="color:red;"></span>
<table>
<tr>
<td>Username:</td>
<td><input type="text" id="userName" placeholder="JaneDoe123"> (At least 8 characters)
</tr>
<tr>
<td>Password:</td>
<td><input type="password" id="passWord" placeholder="********"> (At least 8 characters)
</tr>
<tr>
<td>First Name:</td>
<td><input type="text" id="firstName" placeholder="Jane"></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" id="lastName" placeholder="Doe"></td>
</tr>
<tr>
<td>Date of Birth:</td>
<td><input type="date" name="dateBirth"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email" id="email" class="form-control" placeholder="jane.doe#email.com"></td>
</tr>
<tr>
<td>Phone Number:</td>
<td><input type="tel" id="phoneNumber" name="phone" placeholder="502-555-1234"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"/>
<span class="validity"></span> (optional)</td>
</tr>
</table>
<input type="submit" value="Submit"></button>
<input type="reset">
</form>
</body>
</html>

Combine form get variable into single variable

I would like to combine multiple get variable into single variable when the user submits data in form.
For an example, if the user gives input values like "First Name : Dave, Last Name : Smith, Family Name : Dave+Villa"
then the form gives get variable as "?fName=Dave&lName=Smith&famName=Dave+Villa"
But i need output as "?family=Dave-Smith-Dave+Villa" in a single variable.
is that possible?
Also You can use javascript.
Here it is my code,
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<h4>Family Category</h4>
<form name="userForm" action="" method="get">
<table>
<tr><td>First Name :</td><td><input type="text" name="fName"/></td><tr>
<tr><td>Last Name :</td><td><input type="text" name="lName"/></td><tr>
<tr><td>Family Name:</td><td><input type="text" name="famName"/></td><tr>
<tr><td></td><td><input type="submit" value="Add Category"/></td><tr>
</table>
</form>
</body>
</html>
Use a hidden field input and name it name="family" and remove name from all other inputs., then we can set the value of family before we submit the form using Javascript.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<h4>Family Category</h4>
<form name="userForm" action="" method="get" onsubmit="setGetUrl()">
<table>
<tr><td>First Name :</td><td><input id="name" type="text" />
<input type="text" name="family" id="family" hidden></td><tr>
<tr><td>Last Name :</td><td><input id="lname" type="text" ></td><tr>
<tr><td>Family Name:</td><td><input id="famName" type="text"/></td><tr>
<tr><td></td><td><input type="submit" value="Add Category"/></td><tr>
</table>
</form>
</body>
<script>
function getValue(id) {
return document.getElementById(id).value;
}
function setGetUrl() {
var name = getValue('name');
var lname = getValue('lname');
var famName = getValue('famName');
document.getElementById('family').value = name + '-' + lname + '-' + famName;
}
</script>
</body>
</html>
We can use JavaScript to change a hidden variable in the form with name=family with the concatenated FirstName, LastName and Family.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
function X()
{
x = document.getElementById("a").value + "-" + document.getElementById("b").value + "-" + document.getElementById("c").value;
document.getElementById("d").value = x;
}
</script>
<h4>Family Category</h4>
<form name="userForm" action="dd.php" method="get" onsubmit="return X()">
<table>
<tr><td>First Name :</td><td><input type="text" id="a"/></td><tr>
<tr><td>Last Name :</td><td><input type="text" id="b"/></td><tr>
<tr><td>Family Name:</td><td><input type="text" id="c"/></td><tr>
<tr><td></td><td><input type="hidden" id="d" name="family"/></td><tr>
<tr><td></td><td><input type="submit" value="Add Category"/></td><tr>
</table>
</form>
</body>
</html>
Then we can submit it.
Note: Here you'll find the URL as family=Dave-Smith-Dave%2BVilla
Don't worry! Use
<?php
echo $_GET["family"];
?>
and you'll see nice Dave-Smith-Dave+Villa there.
The reason of this %2B is Character + is converted to %2B in HTTP Post
Also you can find a list of URL encodings in https://www.w3schools.com/tags/ref_urlencode.asp

Scoring system in PHP without database

I want to make a quiz in PHP.
The answers are chosen from radio buttons. If the user chooses the correct answer his score adds 1 if wrong answer his score is reduced by 1.
Finally I want his score to appear as an alert.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Quiz</title>
</head>
<body>
<?php
$score=0;
?>
<p><font size="3"> <b>There is 2 multiple choice questions<br />
Every correct answer +1 <br />
Wrong answer -1<br />
Good Luck!</b></font></p></br></br></br>
<table width="300" border="1" cellspacing="2" cellpadding="2">
<tr>
<td><p><font size="3"> <b> Question 1:
</b></font></p>
Guess The Star Of The Movie <font color="red">"The Equalizer"</font><br />
<br />
<input type="radio" name="n1" value="Denzel Washington">Denzel Washington<br>
<input type="radio" name="n1" value="Mark Wahlberg">Mark Wahlberg<br>
<input type="radio" name="n1" value="Jason Statham">Jason Statham<br>
<input type="radio" name="n1" value="Sylvester Stallone">Sylvester Stallone<br>
</form ></td>
</tr>
<tr>
<td><p><font size="3"> <b> Question 2:
</b></font></p>
Guess The Star Of The Movie <font color="red">"Game Plan"</font><br />
<br />
<input type="radio" name="n2" value="Vin Diesel">Vin Diesel<br>
<input type="radio" name="n2" value="Dwayne Johnson">Dwayne Johnson<br>
<input type="radio" name="n2" value="Liam Hamworth">Liam Hamworth<br>
<input type="radio" name="n2" value="Adam Sandler">Adam Sandler<br>
</form ></td>
</tr>
</table>
<?php
$score=0;
if($n1=="Denzel Washington")
$score = $score+1;
else $score = $score-1;
if($n2=="Dwayne Johnson")
$score = $score+1;
else
$score = $score-1;
?>
<button type="button" onclick="alert('<?php echo "your score is: ".$score.""; ?> ')">Submit</button>
</body>
</html>
When I click the submit button the score is -2 although I have chosen the correct answer
Your code is running unconditionally, EVERY time the page is loaded. That means your "is this answer right" code always declares it wrong. so effectively you've got:
$score = 0;
$score = $score - 1; // $n1 is blank, therefore wrong
$score = $score - 1; // $n2 is blank, therefore wrong
You should at LEAST be detecting if the form was actually submitted, e.g.
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
... do scoring here ..
}
But most of that's irrelevant anyways. You don't even have a <form> tag, so there's no way for those input fields to ever submit to anything.

Why does my form still submits even though the validator returns false?

I cannot seem to get this code to work. Any suggestions?
This forms should return false and thus not submit if the validation has failed.
However, my code submits anyways regardless if the user failed the validation.
<?xml version = "1.0" encoding = "utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Student Feedback Form Validator</title>
<script type="text/javascript">
function userFocus()
{
var x=document.forms["Login"]["userName"].value;
if (x==null || x=="")
{
document.getElementById("userName").focus();
}
}
function javaScriptValidation()
{
validateUserName();
validatePin();
validateSelection();
}
function validateUserName()
{
var letters = /^[A-Za-z0-9]{6,20}$/;
if (!letters.test(userName.value))
{
alert("Invalid User Name");
userName.focus();
return false;
}
}
function validatePin()
{
var code = document.getElementById("pinCode");
var letters = /^[0-9]{6,20}$/;
if (!letters.test(code))
{
alert("Invalid Pin");
return false;
}
}
</script>
</head>
<body onload="userFocus()">
<form name="Login" method="post" action="" onsubmit="return javaScriptValidation()">
<table summary="Form">
<tr>
<td><label for="username">Your user name:</label></td>
<td><input type="text" id="userName" name="userName" size="15" maxlength="20"/></td>
</tr>
<tr>
<td><label for="pinCode">Your pin code:</label></td>
<td><input type="text" id="pinCode" name="userName" size="15" maxlength="20"/></td>
</tr>
</table>
<p>
<input type="submit" value="Login"/>
<input type="reset" value="Reset"/>
</p>
</form>
</body>
</html>

Homework help, what am I doing wrong here? [Javascript, validation]

Trying to get this form to validate email using the function the professor said to use. We cannot use jquery or any other way to handle this. He's very...specific...on how he wants things done. Anyway, last week of a web design course and introduces javascript without much explanation.
The function is simply validating email but I have no frickin clue on how to call the function properly (verify_email). I've found countless examples of how to do this other ways but I'm pretty sure he will take off points for not doing it his way. Frantically trying to format this on an edit... it was fine when I submitted.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Feedback</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="media/css/webpageCSS.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery /1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function verify_email ()
{
var email_val=document.getElementById("email").value;
var regex = /^[A-Z0-9_%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if( email_val.search( regex ) == -1)
{
alert("Email is not valid");
return false;
}
else
{
return true;
}
}
</script>
</head>
<body class="sdd">
<nav>
Home
Resume
Class List
Miscellaneous
Feedback
</nav>
<header>
<h1 class="sd">Feedback Page</h1>
</header>
<div id="wrapper">
<div id="leftcolumn2">
</div>
<div id="rightcolumn2">
<section>
<br><br>
Feedback Form:
<form name="comform" method="post" action="http://webdevfoundations.net/scripts/formdemo.asp" onsubmit="return verify_email();">
<table class="comtab">
<tr>
<td>*First Name: <input type="text" name="fname" id="fname"></td>
<td>*Last Name: <input type="text" name="lname" id="flname"></td>
</tr>
<tr>
<td id="com" colspan="2"><textarea cols="60" rows=5 name="comments" id="comments">Enter your feedback here</textarea></td>
</tr>
<tr>
<td class="alignl" colspan="2">Email (optional): <input type="text" name="email" id="email"></td>
</tr>
<tr>
<td class="alignl" colspan="2"><input type="submit" value="Submit Comment" ></td>
</tr>
</table>
</form>
</section>
<footer class="footbot">
© 2010
</footer>
</div>
</div>
try this
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Feedback</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="media/css/webpageCSS.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function verify_email ()
{
var email_val=document.getElementById("email").value;
var regex = /^[A-Z0-9_%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if( email_val.search( regex ) == -1)
{
alert("Email is not valid");
return false;
}
else
{
return true;
}
}
</script>
</head>
<body class="sdd">
<nav>
Home
Resume
Class List
Miscellaneous
Feedback
</nav>
<header>
<h1 class="sd">Feedback Page</h1>
</header>
<div id="wrapper">
<div id="leftcolumn2">
</div>
<div id="rightcolumn2">
<section>
<br><br>
Feedback Form:
<form name="comform" method="post" action="http://webdevfoundations.net/scripts/formdemo.asp" onsubmit="return verify_email();">
<table class="comtab">
<tr>
<td>*First Name: <input type="text" name="fname" id="fname"></td>
<td>*Last Name: <input type="text" name="lname" id="flname"></td>
</tr>
<tr>
<td id="com" colspan="2"><textarea cols="60" rows=5 name="comments" id="comments">Enter your feedback here</textarea></td>
</tr>
<tr>
<td class="alignl" colspan="2">Email (optional): <input type="text" name="email" id="email"></td>
</tr>
<tr>
<td class="alignl" colspan="2"><input type="submit" value="Submit Comment" ></td>
</tr>
</table>
</form>
</section>
<footer class="footbot">
© 2010
</footer>
</div>
</div>
</body>
</html>
Try using
<script type="text/javascript">
function verify_email (email_val)
{
var regex = /^[A-Z0-9_%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if( email_val.search( regex ) == -1)
{
alert("Email is not valid");
return false;
}else{
return true;
}
}
</script>
In the body of your page you need to register the function with the input for the email.
<input type="text" name="email" onchange="verify_email()" />
Are you wanting to pass the string "email" to the email validation function? Or do you want to actually check whatever is in the email input? If you're just passing "email" to test, it needs to be in quotes (') for it to be passed correctly.
This might be the problem:
function verify_email(email_val)
{
var regex = /^[A-Z0-9_%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if (email_val.search(regex) == -1)
{
alert("Email is not valid");
return false;
}
return true;
}
It will always return true. Also, search doesn't handle Regex. You need to run the string onto the regex. This code might work:
function verify_email(email_val)
{
var regex = /^[A-Z0-9_%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if (regex.exec(email_val) == -1)
{
alert("Email is not valid");
return false;
} else {
return true;
}
}
Also, see the comment Matt Phillips posted: Homework help, what am I doing wrong here? [Javascript, validation].
Also, verify_email(email) is not defined. You should use verify_email(document.getElementById('email').value).
The javascript variable email is not defined anywhere so you are passing an undefined variable to the javascript function. call the function like
<input type="submit" value="Submit Comment" onclick="verify_email(document.getElementById('email').value);">

Categories