This is my first time with javascript. I'm making a basic login page where there is a control for the email input. I would like to put an error message of some kind when someone gives an email address with illegal symbol. Here my code:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
</head>
<body>
<div>
<form action="Home.html" method="post">
<label for="id">Username</label>
<input type="text" name="id" id="id" value="" />
<br/>
<label for="pass">Password</label>
<input type="password" name="pass" id="pass" value="" />
<br/>
<label for="email">Email</label>
<input type="email" name="email" id="email" value="" />
<br/>
<script type="text/javascript">
function checkEmail ()
{
var emailObject = document.getElementById("email");
var email = emailObject.getAttribute("value").toString();
var error = document.createTextNode("Uncorrect email");
var result = email.search("/[^(a-z | A-Z | 0-9 | #)]/");
if(result !== -1)
{
emailObject.appendChild(error);
}
}
</script>
<button type="button" onclick="checkEmail()"> Confirm </button>
</form>
</div>
</body>
</html>
I have a function I use to validate email addresses, it uses regex. I would suggest jQuery just to show/hide the error message.
function validEmail(val){
if(val.length < 6 || val.length > 255) return false;
return new RegExp(/^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/).test(val);
}
$(function(){
$("#email").on("change", function(){
var email = $("#email").val();
if(!validEmail(email)){
$("#emailError").show();
} else {
$("#emailError").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<!-- Some Inputs here -->
<span id='emailError' style='display: none;'>Please enter a valid email address</span><br>
<input type='email' id='email' name='email' placeholder='Email Address' />
<!-- More Inputs here -->
<button type='submit'>Submit</button>
</form>
you're trying to append something to an input element (email input, in this case). I'd suggest to append it to your main div, which in this case I have identified as "YOUR_ID".
Also, I suggest you a more efficint way to check a valid email.
follow the below example
<body>
<div id="YOUR_ID">
<form action="Home.html" method="post">
<label for="id">Username</label>
<input type="text" name="id" id="id" value="" />
<br/>
<label for="pass">Password</label>
<input type="password" name="pass" id="pass" value="" />
<br/>
<label for="email">Email</label>
<input type="email" name="email" id="email" value="" />
<br/>
<script type="text/javascript">
function checkEmail ()
{
var emailObject = document.getElementById("email");
var divObject = document.getElementById("YOUR_ID");
var email = emailObject.getAttribute("value").toString();
var error = document.createTextNode("Uncorrect email");
var check = /^([\w-]+(?:\.[\w-]+)*)#((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
var result = check.test(email);
if(result !== -1)
{
divObject.appendChild(error);
}
}
</script>
<button type="button" onclick="checkEmail()"> Confirm </button>
</form>
</div>
</body>
Related
If I click the generate button I want the following passwords to appear "abcd" "1234" "!##$" in the three empty boxes but I missed my class about this lesson and when I tried to watch youtube videos about it I get confused so can anyone help me on How to put the passwords "abcd" "1234" "!##$" in the 3 empty boxes if I press the generate button? Thank you in advance
<html>
<head>
<h1><center>Hi! there, to enter to our website please generate your Three(3) password token and use it to Enter<center></h1>
</head>
<script>
var counter=3;
function validate()
{
while(counter>=1)
{
var token1="abcd";
var token2="1234";
var token3="!##$";
var checkToken=document.getElementById("getToken").value;
if(checkToken===token1 || checkToken===token2)
{
document.write("<center>password correct. Please click the link:");
document.write('<br> Check our site');
}
else
{
counter=counter-1;
alert("Incorrect password!\n\n Attempts left: "+counter);
if(counter==0)
{
document.write("please contact our security team.");
}
break;
}
}
}
</script>
<script>
function generate()
var pass1="abcd";
var pass2="1234";
var pass3="!##$";
</script>
<body>
<center>
<p>Generate password token</p>
<input type="text" placeholder="Create password" id="password1" readonly />
<input type="text" placeholder="Create password" id="password2" readonly />
<input type="text" placeholder="Create password" id="password3" readonly />
<br>
<input type="button" value="Generate Token" onclick="generate()">
<p>Enter password token below to continue:</p>
<input type="password" placeholder="Enter password" id="getToken">
<br>
<input type="button" value="Validate Token" onclick="validate()">
</center>
</body>
So I tried doing this but it did not work
function generate()
var pass1 = "abcd";
var pass2 = "1234";
var pass3 = "!##$";
getElementById(password).innerHtml = pass1;
getElementById(passwords).innerHtml = pass2;
getElementById(passwordss).innerHtml = pass3;
Oh my God I figured it out So the correct one is
<script>
function generate(){
var pass1 = "abcd";
var pass2 = "1234";
var pass3 = "!##$";
document.getElementById("password").value=pass1;
document.getElementById("passwords").value=pass2;
document.getElementById("passwordss").value=pass3;
}
</script>
I changed Innerhtml to value and I was missing {}
<html>
<head>
<h1><center>Hi! there, to enter to our website please generate your Three(3) password token and use it to Enter<center></h1>
</head>
<script>
var counter=3;
function validate()
{
while(counter>=1)
{
var token1="abcd";
var token2="1234";
var token3="!##$";
var checkToken=document.getElementById("getToken").value;
if(checkToken===token1 || checkToken===token2)
{
document.write("<center>password correct. Please click the link:");
document.write('<br> Check our site');
}
else
{
counter=counter-1;
alert("Incorrect password!\n\n Attempts left: "+counter);
if(counter==0)
{
document.write("please contact our security team.");
}
break;
}
}
}
</script>
<script>
function generate(){
var pass1 = "abcd";
var pass2 = "1234";
var pass3 = "!##$";
document.getElementById("password").value=pass1;
document.getElementById("passwords").value=pass2;
document.getElementById("passwordss").value=pass3;
}
</script>
<body>
<center>
<p>Generate password token</p>
<input type="text" placeholder="Create password" id="password" readonly />
<input type="text" placeholder="Create password" id="passwords" readonly />
<input type="text" placeholder="Create password" id="passwordss" readonly />
<br>
<input type="button" value="Generate Token" onclick="generate()">
<p>Enter password token below to continue:</p>
<input type="password" placeholder="Enter password" id="getToken">
<br>
<input type="button" value="Validate Token" onclick="validate()">
</center>
</body>
I am trying to have users enter their information for signing up. I am coming across an error and it looks like I know what the error is but I do not know how to fix it. Someone help, please.
Uncaught TypeError: Cannot read property 'value' of null at signUpValidate (fhe.js:26) at HTMLInputElement.onclick
HTML Code:
<!DOCTYPE html>
<html lang="en">`enter code here`
<head>
<script type="text/javascript" src="fhe.js"></script>
<link rel="stylesheet" href="fheCss.css"/>
<meta charset="UTF-8">
<title>Sign Up Page</title>
<h1>Family Home Evening</h1>
<h3>Sign Up</h3>
</head>
<body class="backgroundPic">
<form class="mySignUpForm">
<input type="text" placeholder="First Name" name="firstName" required/><br><br>
<input type="text" placeholder="Last Name" name="lastName" required/><br><br>
<input type="text" placeholder="Username" name="signUpUserName" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{8,20}$" required/><br><br>
<input type="text" placeholder="Password" name="signUpPassword" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" required/><br><br>
<input type="text" placeholder="Verify Password" name="signUpVerPassword" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" required/><br><br>
<input type="button" value="Sign up" id="signup" onclick="signUpValidate()"/><br><br>
Back to Login<br><br>
</form>
<h4>Username: Username must be between 8 to 20 character<br><br>
Password: Password must contain 1 uppercase, lowercase and number</h4><br><br>
</body>
</html>
JS Code:
var signUpAttempt = 3;
function signUpValidate() {
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var signUpUserName = document.getElementById("signUpUserName").value;
var signUpPassword = document.getElementById("signUpPassword").value;
var signUpVerPassword = document.getElementById("signUpVerPassword").value;
if (firstName == "Ashish" &&
lastName == "Pokhrel" &&
signUpUserName == "ashishpokhrel" &&
signUpPassword == "ashishpokhrel69" &&
signUpVerPassword == "ashishpokhrel69"){
alert("Signed Up Successful");
window.location = "login.html";
return false;
}
else {
signUpAttempt --;
alert("Please fill out correct input." + "You have " + signUpAttempt + "attempt.");
if(signUpAttempt == 0){
document.getElementById("firstName").disabled = true;
document.getElementById("lastName").disabled = true;
document.getElementById("signUpUserName").disabled = true;
document.getElementById("signUpPassword").disabled = true;
document.getElementById("signUpVerPassword").disabled = true;
document.getElementById("signup").disabled = true;
return true;
}
}
}
You are using document.getElementById() to fetch the value from the form, but you haven't provided the id attribute in the input elements.
<input type="text" id="firstName" placeholder="First Name" name="firstName" required/><br><br>
<input type="text" id="lastName" placeholder="Last Name" name="lastName" required/><br><br>
<input type="text" id="signUpUserName" placeholder="Username" name="signUpUserName" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{8,20}$" required/><br><br>
<input type="text" id="signUpPassword" placeholder="Password" name="signUpPassword" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" required/><br><br>
<input type="text" id="signUpVerPassword" placeholder="Verify Password" name="signUpVerPassword" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" required/><br><br>
You're using document.getElementById to get your elements, but you haven't defined IDs on the elements themselves (in the HTML). Note that an element's name is not the same as its ID.
The problem is, that you are trying get getElementById, but you have no element with that ID, so you need to add an ID on all the input fields you are trying to get the data from
<!DOCTYPE html>
<html lang="en">`enter code here`
<head>
<script type="text/javascript" src="fhe.js"></script>
<link rel="stylesheet" href="fheCss.css"/>
<meta charset="UTF-8">
<title>Sign Up Page</title>
<h1>Family Home Evening</h1>
<h3>Sign Up</h3>
</head>
<body class="backgroundPic">
<form class="mySignUpForm">
<input type="text" placeholder="First Name" name="firstName" id="firstName" required/><br><br>
<input type="text" placeholder="Last Name" name="lastName" id="lastName" required/><br><br>
<input type="text" placeholder="Username" name="signUpUserName" id="signUpPassword" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{8,20}$" required/><br><br>
<input type="text" placeholder="Password" name="signUpPassword" id="signUpPassword" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" required/><br><br>
<input type="text" placeholder="Verify Password" name="signUpVerPassword" id="signUpVerPassword" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" required/><br><br>
<input type="button" value="Sign up" id="signup" onclick="signUpValidate()"/><br><br>
Back to Login<br><br>
</form>
<h4>Username: Username must be between 8 to 20 character<br><br>
Password: Password must contain 1 uppercase, lowercase and number</h4><br><br>
</body>
</html>
So, first, I'm not done with my code.However, the following Javascript part is suppose to change the site language when an image is clicked. I read ( on other post here) that it could be because the whole html document has not finished loading? Anyway, here's my code: hope I can get some insight on what causes the error:
<DOCTYPE! html>
<html>
<head>
<title> Registration</title>
<link type="text/css" rel="stylesheet" href="stylesheetex3.css"/>
<script>
function changeLanguage()
{
document.getElementById("z").addEventListener("click");
var Username1= document.getElementById("User");
var Password1= document.getElementById("Pass");
var Retype1= document.getElementById("Pass2");
var Firstname1= document.getElementById("First");
var Middlename1= document.getElementById("Second");
var LastName1= document.getElementById("Third");
var email1 = document.getElementById("at");
var NomUtilisateur1 = document.createTextNode("Nom D'utilisateur");
var mdp1 = document.createTextNode("Mot de Passe");
var mdp21 = document.createTextNode("Verification du mot de passe");
var Prenom1 = document.createTextNode("Prenom");
var Prenom2 = document.createTextNode("Deuxieme prenom");
var NomdeFamilly1 = document.createTextNode("Nom de Famille");
var Email1 = document.createTextNode("Addresse courielle");
Username1.appendChild(NomUtilisateur1);
Password1.appendChild(mdp1);
Retype1.appendChild(mdp21);
Firstname1.appendChild(Prenom1);
Middlename1.appendChild(Prenom2);
LastName1.appendChild(NomdeFamilly1);
email1.appendChild(Email1);
}
</script>
</head>
<body>
<h1>Registration Form</h1>
<div>
<div>please fill out the form below</div>
<div class="Img">
<img id="z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRR2pntKihP8gow1vBejsXhgYmHDctgwjcXKWKk9y0PEXsXEbUxpELQ" onClick="changeLanguage()" />
</div>
<form>
<fieldset>
<legend id="login"> Login Details </legend>
<p>Username* <input type="text" name="Username" id="User"></p>
<p>Password* <input type="Password" name="Password" id="Pass"></input</p>
<p>Retype Password*<input type="Password" name="RetypePassword" onChange="checkPasswordMatch();" id="Pass2"></input></p>
</fieldset>
<fieldset>
<legend>User Data</legend>
<p>Firstname* <input type="text" name="firstName"></input id="First"></p>
<p>Middlename*<input type="text" name="middleName" id="Second"></input></p>
<p>LastName*<input type="text" name="lastName" id="Third"></input></p>
<p>Email*<input type="email" name="email" id="at"> </input></p>
</fieldset>
<input type="submit" value="Submit"></input>
</form>
</div>
</body>
You have syntax error in <input type="text" name="firstName"></input id="First">
Also, you can't append children to input element, instead you can insert them as its sibling
function changeLanguage() {
document.getElementById("z").addEventListener("click");
var Username1 = document.getElementById("User");
var Password1 = document.getElementById("Pass");
var Retype1 = document.getElementById("Pass2");
var Firstname1 = document.getElementById("First");
var Middlename1 = document.getElementById("Second");
var LastName1 = document.getElementById("Third");
var email1 = document.getElementById("at");
var NomUtilisateur1 = document.createTextNode("Nom D'utilisateur");
var mdp1 = document.createTextNode("Mot de Passe");
var mdp21 = document.createTextNode("Verification du mot de passe");
var Prenom1 = document.createTextNode("Prenom");
var Prenom2 = document.createTextNode("Deuxieme prenom");
var NomdeFamilly1 = document.createTextNode("Nom de Famille");
var Email1 = document.createTextNode("Addresse courielle");
insertAfter(NomUtilisateur1, Username1);
insertAfter(mdp1, Password1);
insertAfter(mdp21, Retype1);
insertAfter(Prenom1, Firstname1);
insertAfter(Prenom2, Middlename1);
insertAfter(NomdeFamilly1, LastName1);
insertAfter(Email1, email1);
}
function insertAfter(node, anchor){
if(anchor.nextSibling){
anchor.parentNode.insertBefore(node, anchor.nextSibling);
}else{
anchor.parentNode.appendChild(node);
}
}
<h1>Registration Form</h1>
<div>
<div>please fill out the form below</div>
<div class="Img">
<img id="z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRR2pntKihP8gow1vBejsXhgYmHDctgwjcXKWKk9y0PEXsXEbUxpELQ" onClick="changeLanguage()" />
</div>
<form>
<fieldset>
<legend id="login">Login Details</legend>
<p>Username*
<input type="text" name="Username" id="User" />
</p>
<p>Password*
<input type="Password" name="Password" id="Pass" />
</p>
<p>Retype Password*
<input type="Password" name="RetypePassword" onChange="checkPasswordMatch();" id="Pass2"/>
</p>
</fieldset>
<fieldset>
<legend>User Data</legend>
<p>Firstname*
<input type="text" name="firstName" id="First" />
</p>
<p>Middlename*
<input type="text" name="middleName" id="Second" />
</p>
<p>LastName*
<input type="text" name="lastName" id="Third" />
</p>
<p>Email*
<input type="email" name="email" id="at" />
</p>
</fieldset>
<input type="submit" value="Submit" />
</form>
</div>
Note: Input element's don't have closing tags
I'm trying to use javascript to perform client-side verification of input to the following form. The 'firstname' field should contain only alphabetical characters. How can I write the validation function to implement this behaviour?
form.html
<html>
<head>
<script type="text/javascript" src="mainform.js"></script>
</head>
<body>
<form name="mainform" method="post" onSubmit="return validation();" >
firstname <input type="text" name="firstname"><br>
lastname <input type="text" name="lastname"><br>
username <input type="text" name="username"><br>
password <input type="password" name="password"><br>
confirm password<input type="password" name="cpassword"><br>
email <input type="email" name="email"><br>
phone no <input type="text" name="phoneno"><br>
<input type="submit" name="submit">
</body>
</html>
form.js
function validation()
{
var fname=document.mainform.firstname;
var letters="/[a-zA-Z]$/";
if(fname.value.match(letters)){
return true;
}
else
{
alert('first name must be alphabets');
fname.focus();
return false;
}
}
function validation()
{
var fname = document.mainform.firstname;
if(/^[a-zA-Z]+$/.test(fname.value)) {
return true;
} else {
alert('first name must be alphabets');
fname.focus();
return false;
}
}
Do not forget to make a check on the server side too for security.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hide</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style type="text/css">
label input[type="button"]
{
background: #E17698;
}
</style>
<script>
$(document).delegate("#submit","click",function(e)
{
var name = $("#fname").val();
var hasError = false;
var searchReg = /^[a-zA-Z ]+$/;
if(name == '') {
$("#txtt").after('<span class="error" style="color:red;"> *Fill Name Box</span>');
hasError = true;
} else if(!searchReg.test(name)) {
$("#txtt").after('<span class="error" style="color:red;"> **Enter Vaild Name.</span>');
hasError = true;
}else if(searchReg.test(name)) {
$("#txtt").after('<span class="error" style="color:white;"> Vaild Name</span>');
}
if(hasError == true) {
return false
}
});
</script>
</head>
<body>
<form name="mainform" method="post">
firstname <input type="text" name="firstname" id='fname'><label id="txtt"></label><br>
lastname <input type="text" name="lastname"><br>
username <input type="text" name="username"><br>
password <input type="password" name="password"><br>
confirm password<input type="password" name="cpassword"><br>
email <input type="email" name="email"><br>
phone no <input type="text" name="phoneno"><br>
<input type="submit" name="submit" id='submit'>
</form>
</body>
</html>
I have a form that I created and I am trying to check the email field to make sure it's an email. And I only want for people to be able to enter #msu.edu email addresses. I have the script written out to check for the email, but it is not working, and I do not know how to make it to where only a #msu.edu can be used.
<form id="contact-form" class="contact-form" method="post" action="" onSubmit="return checkbae()" name="validation">
<div class="form-group row" id="price">
<div class="col-lg-4">
<input type="text" name="fname" class="form-control" id="name" placeholder="First *" required >
</div>
<div class="col-lg-4">
<input type="text" name="lname" class="form-control" id="name" placeholder="Last *" required>
</div>
<div class="col-lg-4">
<input type="text" name="email" class="form-control" id="name" placeholder="E-mail *" required>
</div>
</div>
</div>
<div class="form-group row" align="center">
<div class="col-lg-12" align="center">
<button type="submit" class="button default">SEND <i class="glyphicon glyphicon-send"></i></button>
</div>
</div>
</form>
<script language="JavaScript1.2">
var testresults
function checkemail(){
var str=document.validation.emailcheck.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>
Are you sure that YOU have written the check-script? ;D
In the script you access a field emailcheck which does not exist in the form.
Solutions:
Update
Tested and working.
function checkMail() {
var email = document.validation.email.value.toLowerCase();
var suffix = '#msu.edu';
var result = email.indexOf(suffix, email.length - suffix.length) !== -1;
alert('Valid email found: ' + result);
return result;
}
http://jsfiddle.net/du65V/
Update 2
Using RegEx. Also tested and working.
function checkMail() {
var email = document.validation.email.value.toLowerCase();
var filter = /^([\w-]+(?:\.[\w-]+)*)#msu.edu/i;
var result = filter.test(email);
alert('Valid email found: ' + result);
return result;
}
http://jsfiddle.net/du65V/1/