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>
Related
I have an HTML form with some fields and a javascript validation that checks them, my problem is that js doesn't return anything, and although the fields are filled not propertly the submit sends.
Here an example of my code:
HTML
<form method="post" action="action.php" onsubmit="return validate_form();">
<table>
<tr>
<td>
<label class="standard_text">
E-mail
</label>
</td>
<td><input class="textarea" required type="email" name="mail" id="mail" placeholder="E-mail"></label></td>
<td><div class="check_icon icon_yes" style="display:none" id="mail_ok_icon"></div></td>
<td><div class="check_icon icon_no" style="display:none" id="mail_no_icon"></div></label></td>
<td><div class="check_message" style="display:none" id="mail_message"><label class="important_text">The email format is not correct!</label></div></td>
</tr>
</table>
<input class="button_submit" type="submit" name="send_form" value="Register"/>
</form>
Javascript
function validate_form(){
//email var
var mail = document.getElementById("mail").value;
var mail_ok_icon = document.getElementById("mail_ok_icon");
var mail_no_icon = document.getElementById("mail_no_icon");
var mail_message = document.getElementById("mail_message");
//email format check
if ((/(.+)#(.+){2,}\.(.+){2,}/.test(mail)) || mail=="" || mail==null) {
mail_no_icon.style.display="block";
mail_message.style.display="block";
return(false);
} else {
mail_ok_icon.style.display="block";
}
}
So I'm trying to display elements depending on the javascript checking and also trying to don't let the user send the information if the checking of all the fields are not correct.
What am I missing?
Thanks
I got it working with the following code -:
In the original code the email input had required and type="email" which never called the javascript code in the first instance.
<html>
<head>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<form method="post" action="action.php" onsubmit="return validate_form();">
<table>
<tr>
<td>
<label class="standard_text">
E-mail
</label>
</td>
<td><input class="textarea" name="mail" id="mail" placeholder="E-mail"></label></td>
<td><div class="check_icon icon_yes" style="display:none" id="mail_ok_icon"></div></td>
<td><div class="check_icon icon_no" style="display:none" id="mail_no_icon"></div></label></td>
<td><div class="check_message" style="display:none" id="mail_message"><label class="important_text">The email format is not correct!</label></div></td>
</tr>
</table>
<input class="button_submit" type="submit" name="send_form" value="Register"/>
</form>
</body>
</html>
Now here is the js code -:
function validate_form() {
//email var
var mail = document.getElementById("mail").value;
var mail_ok_icon = document.getElementById("mail_ok_icon");
var mail_no_icon = document.getElementById("mail_no_icon");
var mail_message = document.getElementById("mail_message");
//email format check
if (!(/(.+)#(.+){2,}\.(.+){2,}/.test(mail)) || mail=="" || mail==null) {
mail_no_icon.style.display="block";
mail_message.style.display="block";
console.log('hi');
return false;
} else {
mail_ok_icon.style.display="block";
return true;
}
}
I wrote several functions to check if the two passwords are equal. I first type two passwords. When I click out of the "verify password" box, it should either display "The passwords match" or "Please enter your password again because the two passwords don't match" depending on whether or not the passwords are equal to each other. However, when I type in two identical passwords and I click out of the "verify password" text box, the message does not display the first time. I have to click inside the "verify password" box one more time, and then click out of it for the message to display. I want the message to display right after I click out of the "verify password" textbox, not having to click in and out again. What am I doing wrong here?
I am using a password.js file and a setpassword.html file for this webpage.
My password.js file is:
var verifypasswordclick = document.getElementById("txtPWVerified");
function verifypassword1() {
var password1 = document.getElementById("txtPassword").value;
var verifypassword = document.getElementById("txtPWVerified").value;
if(password1 == '' || verifypassword == '') {
return null;
}
if(password1 == verifypassword) {
alert('The passwords match');
}
else if(password1 !== verifypassword || password1 == "" || verifypasword == "") {
alert("Please enter your password again because the two passwords don't match");
}
}
verifypasswordclick.onblur = function() {
verifypasswordclick.addEventListener("blur",verifypassword1);
};
My setpassword.html file is:
<!DOCTYPE html>
<!-- H5FormValidation.html -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Register Here</title>
</head>
<body>
<h2>Register Here</h2>
<form id="formTest" method="get" action="processData">
<table>
<tr>
<td><label for="txtEmail">Email<span class="required">*</span></label></td>
<td><input type="email" id="txtEmail" name="email" required></td>
</tr>
<tr>
<td><label for="txtPassword">Password<span class="required">*</span></label></td>
<td><input type="password" id="txtPassword" name="password" required></td>
</tr>
<tr>
<td><label for="txtPWVerified">Verify Password<span class="required">*</span></label></td>
<td><input type="password" id="txtPWVerified" name="pwVerified" required></td>
</tr>
<tr>
<td> </td>
<td>
<input type="reset" value="CLEAR" id="btnReset"></td>
</tr>
</table>
</form>
<script src = "password.js"></script>
</body>
</html>
The password is verified second time because, the eventListener is added to the element only after the first onblur event. To work in first time don't add the eventListener with in the onBlur function. Refer the below js code.
var verifypasswordclick = document.getElementById("txtPWVerified");
function verifypassword1() {
var password1 = document.getElementById("txtPassword").value;
var verifypassword = document.getElementById("txtPWVerified").value;
if (password1 == verifypassword) {
alert('The passwords match');
}
else if (password1 !== verifypassword || password1 == "" || verifypasword == "") {
alert("Please enter your password again because the two passwords don't match");
}
}
verifypasswordclick.addEventListener("blur", verifypassword1);
I am currently using html to code a 'form entry'. I am also using a JavaScript validation, to validate the input in of the form. At the moment, i have 'name', 'subject' and 'examination number', each working and having functional validations. For the 'qualification' fields, I have radio buttons where the user has to click-select their qualification. I have the validation in place, but unfortunately I cant get the field to be highlighted in red and display the error message when the form is submitted and the 'qualification' has been left blank. everything works apart from the qualification field. It would be great if someone could fix the validation of the 'qualification' so that when the field is left emty, the text will be highlighted and the error message will be included. thanks
here is my code:
<html>
<head>
<title>Exam Entry</title>
<script language="javascript" type="text/javascript">
function qualinform(qualname) {
alert(qualname + " was selected as your qualification.");
}
function validateForm(e) {
var result = true;
var msg="";
if (document.ExamEntry.name.value=="") {
msg+="You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}
if (document.ExamEntry.group1.value=="") {
msg+="You must choose a qualification\n";
document.ExamEntry.group1.focus();
document.getElementById('radioqual').style.color="red";
result = false;
}
var regex = /^\d{4}$/;
if (document.ExamEntry.Examination_number.value == "") {
msg+="You must enter your examination number";
document.getElementById('Examination_number').style.color="red";
result = false;
} else if (isNaN(document.ExamEntry.Examination_number.value)) {
msg+="Examination number should only contain digits";
document.getElementById('Examination_number').style.color="red";
result = false;
} else if (!regex.test(document.ExamEntry.Examination_number.value)) {
msg+="Examination number should contain exactly 4 digits";
document.getElementById('Examination_number').style.color="red";
result = false;
}
if (msg != "") {
alert(msg);
}
return result;
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html" onsubmit="return validateForm();">
<table width=”50%” border=”0”>
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<td id="Examination_number">Examination number</td>
<td><input type="text" maxlength="4" name="Examination_number" /></td>
</tr>
<tr>
<td id="qualification">Choose your qualification</td>
<tr>
<td id="radioqual">
<input onclick="qualinform('GCSE');" type="radio" name="group1" value="GCSE">GCSE<br>
<input onclick="qualinform('AS');" type="radio" name="group1" value="AS">AS<br>
<input onclick="qualinform('A2');" type="radio" name="group1" value="A2">A2<br>
</td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</html>
the return value of the group1 radio buttons when none are selected is undefined, not "" as you expected, so you need to change the condition in the if statement
if (document.ExamEntry.group1.value==undefined)
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">