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);">
Related
I am trying that, when I click on a button it shows a alert message and go to another page
function password_change_function() {
var x = document.getElementById("password_change").value;
alert("Password is changed");
window.location.assign("viewprofile.php");
}
<form>
<table>
<tr>
<td><strong>Current Password</strong></td>
<td><strong>:</strong></td>
<td><input type="password" name="currentpassword" value="ratul#aiub" /></td>
</tr>
<tr>
<td><strong>New Password</strong></td>
<td><strong>:</strong></td>
<td><input type="password" name="newpassword" value="kumar#ai" /></td>
</tr>
<tr>
<td><strong>Retype New Password</strong></td>
<td><strong>:</strong></td>
<td><input type="password" name="retypepassword" value="kumar#ai" /></td>
</tr>
</table>
<p align="center"><input id="password_change" type="submit" value="Submit" onclick="password_change_function()" /></p>
</form>
the main problem is ,it shows the alert message but page not changed
you might want to try switching the last two statements around like this
window.location.assign("viewprofile.php");
alert("Password is changed");} // End of function scope
try this
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<script type="text/javascript">
function password_change_function(){
var x= document.getElementById("password_change").value;
alert("Password is changed");
window.location = "http://example.com/foo.php";
}
</script>
<input id="password_change" type="submit" value="Submit" onclick="password_change_function()"/>
</body>
</html>
You can achieve your goal by swapping the two lines of code:
From this:
alert("Password is changed");
window.location.assign("viewprofile.php");}
To this:
window.location.assign("viewprofile.php");
alert("Password is changed");}
I am setting up a simple php form to collect entries and insert/show them to a myphpmyAdmin db, this works fine. The little problem I'm having is when i try to put in a small bit of js to clear text and also give a popup alert, neither will work, can somebody help me please.
Here is my Javascript file:
function clear(){
document.getElementById("in1", "in2", "in3", "in4", "in5",).value= "";
}
function saved() {
alert("Well done yourself, you have saved an entry to the database.");
}
And here is my php file:
<html>
<head>
<meta charset="utf-8">
<title>CS230 Assignment 3</title>
<link rel="stylesheet" href="style1.css" type="text/css" media="all" />
<script src="myjs.js" type="text/javascript"></script>
</head>
<body>
<h3>Diary:</h3>
<form action="insert.php" method="post">
<div id="table">
<table>
<tr>
<th>When/Where</th>
<th>Event</th>
<th>Emotion</th>
<th>Automatic Thoughts</th>
<th>Rational Response</th>
</tr>
<tr>
<td><input type="text" style="height:500px;" name="in1" id="in1"></td>
<td><input type="text" style="height:500px;" name="in2" id="in2"></td>
<td><input type="text" style="height:500px;" name="in3" id="in3"></td>
<td><input type="text" style="height:500px;" name="in4" id="in4"></td>
<td><input type="text" style="height:500px;" name="in5" id="in5"></td>
</tr>
</table>
</div>
<div id="buttons">
<input type="submit" name="save" id="save" value="Save Entry" onclick="saved()">
</div>
</form>
<div id="clearButton">
<button id="clear" onClick="clear();">clear</button>
</div>
<form action="show.php" method="post">
<input type="submit" name="show" id="show" value="Show Diary">
</form>
</body>
</html>
The document.getElementById() function takes one argument. If you want to fetch a list of elements, you can use .querySelectorAll():
var elements = document.querySelectorAll("#in1, #in2, #in3, #in4, #in5");
That returns a node list, so you'll have to iterate to perform an operation on each one:
function clear(){
var elements = document.querySelectorAll("#in1, #in2, #in3, #in4, #in5");
for (var i = 0; i < elements.length; ++i)
elements[i].value = "";
}
edit — you'll probably want to use a name other than "clear" as "clear" is likely to collide with something; in-line event handlers are highly susceptible to that sort of issue. Alternatively you could explicitly reference window.clear():
<button id="clear" onClick="window.clear();">clear</button>
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>
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">
not sure why my code wont work, im teaching myself javascript i know php moderatly and i also know the intelligence of using java to hold a password and username, but at the moment i just want the script to work.
<html>
<head>
<title>34webs</title>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="javascript" >
function logintry (){
var usern = document.logn.username.value;
var passw = document.logn.password.value;
if(usern == blue && passw == bluee){
alert('password is correct!');
}else{
alert('password is wrong');
}
}
</script>
</head>
<body>
<div id="bod">
<div id="nav">
<p id="buttonhead">34 web</p>
HOME
NEWS
DOWNLOADS
ERA
IE BROWSER
DRIVERS
<form name="logn">
<table style="margin:0 auto; background:#0174DF; color:white;">
<tr>
<td>
Username<br>
<input type="text"
name="username"
value="">
</td>
</tr>
<tr>
<td>
Password<br>
<input type="password"
name="password"
value="">
</td>
</tr>
<tr>
<td style="text-align:center;">
<input type="button"
name="Submit"
value="submit"
onclick= javascript: logintry()>
</td>
</tr>
</table>
</form>
</div>
You are doing a comparison to a variable name, not a string. Change it to
if( usern == "blue" && pw =="bluee"){
//do stuff
}
Edit After you comment, I took another look at your code, you need to surround the javascript: logintry() call with quotes. You are correct in using onclick. You need to remove the "javascript:" That is the syntax when you are using href. Onclick will automatically call the script and doesn't need the protocol prefix.