I started to learn javascript and there was such a question. How to insert a message in a div when the form is filled is not correct? I've seen similar questions where innerHTML was used, but trying to translate it into my application, I did not get anything, the message is not output. Where could I be wrong?
var namePattern = new RegExp("^([A-z]{4,20})$");
var emailPattern = new RegExp("^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*#[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,5})$");
var passwordPattern = new RegExp("^[A-z0-9]{4,20}$");
document.getElementById("registration_form").addEventListener("submit", function(event) {
var fName = document.getElementById("fName").value;
var lName = document.getElementById("lName").value;
var email = document.getElementById("email").value;
var password = document.getElementById("pass").value;
var confirmPassword = document.getElementById("confPass").value;
if (!namePattern.test(fName)) {
document.getElementById("error_first_name").innerHTML = 'Wrong first name';
event.preventDefault();
} else if (!namePattern.test(lName)) {
document.getElementById("error_last_name").innerHTML = 'Wrong last name';
event.preventDefault();
} else if(!emailPattern.test(email)){
document.getElementById("error_email").innerHTML = 'Wrong email';
event.preventDefault();
} else if(!passwordPattern.test(password)){
document.getElementById("error_password").innerHTML = 'Wrong password';
event.preventDefault();
} else if(confirmPassword != password){
document.getElementById("error_confirmPassword").innerHTML = ''
event.preventDefault();
}
})
<form action="" method="post" id="registration_form">
<div class="register-top-grid">
<h3>PERSONAL INFORMATION</h3>
<div>
<span>First Name<label>*</label></span>
<div id="error_first_name" style="color: #ff0000"></div>
<input type="text" name="fName" id="fName" placeholder="Your first name">
</div>
<div>
<span>Last Name<label>*</label></span>
<div id="error_last_name" style="color: #ff0000"></div>
<input type="text" name="lName" id="lName" placeholder="Your last name" >
</div>
<div>
<span>Email Address<label>*</label></span>
<div id="error_email" style="color: #ff0000"></div>
<input type="text" name="eMail" id="email" placeholder="Your email" >
</div
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="register-bottom-grid">
<h3>LOGIN INFORMATION</h3>
<div>
<span>Password<label>*</label></span>
<div id="error_password" style="color: #ff0000"></div>
<input type="password" name="password" id="pass" placeholder="Your password">
</div>
<div>
<span>Confirm Password<label>*</label></span>
<div id="error_confirmPassword" style="color: #ff0000"></div>
<input type="password" name="confirmPassword" id="confPass" placeholder="Confirm your password">
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<input type="submit" name="submit" id="submit" value="submit"/>
</form>
There are a couple of things that were wrong.
First, there is nothing triggering the form submit for which I added a button that will submit the form.
Second event.preventDefault is function.
I corrected the above two and your form is now submitting. (Also take a look at regex I think it is not correct)
var namePattern = new RegExp("^([a-z]{4,20})$");
document.getElementById("registration_form").addEventListener("submit", function(event) {
var fName = document.getElementById("fName").value;
var lName = document.getElementById("lName").value;
if (!namePattern.test(fName)) {
document.getElementById("error_first_name").innerHTML = 'Wrong first name';
event.preventDefault();
} else if (!namePattern.test(lName)) {
document.getElementById("error_last_name").innerHTML = 'Wrong last name';
event.preventDefault();
}
}, false)
<form action="" method="post" id="registration_form">
<div class="register-top-grid">
<h3>PERSONAL INFORMATION</h3>
<div>
<div id="error_first_name" style="color: #ff0000"></div>
<span>First Name<label>*</label></span>
<input type="text" name="fName" id="fName" placeholder="Your first name">
</div>
<div>
<div id="error_last_name" style="color: #ff0000"></div>
<span>Last Name<label>*</label></span>
<input type="text" name="lName" id="lName" placeholder="Your last name">
</div>
<button type="submit">Submit</button>
</form>
JS:
var namePattern = new RegExp("^([A-z]{4,20})$");
document.getElementById("registration_form").addEventListener("submit", function(event){ //you have a syntax error here
//you need to prevent the page reload after submitting the form
event.preventDefault();
var fName = document.getElementById("fName").value;
var lName = document.getElementById("lName").value;
if(!namePattern.test(fName)){
document.getElementById("error_first_name").innerHTML = 'Wrong first name';
event.preventDefault;
}else if(!namePattern.test(lName)){
document.getElementById("error_last_name").innerHTML = 'Wrong last name';
event.preventDefault;
}
}) //don't forget the closed parenthese
Output:
Related
I have checked recent blogs about onsubmit event not triggering the method. Those suggestions were not helpful for this problem.And i've tried this method and form in an another html page which didn't work either.So i am not able to find out where main problem is ?
My code :
<div id="_div2">
<center>
<div class="contianer">
<script type="text/javascript">
function formValidation ()
{
var fName =document.Log.firstName.value;
var lName =document.Log.lastName.value;
var pName =document.Log.penName.value;
var email =document.Log.email.value;
var password=document.Log.password.value;
var confirmPassword=document.Log.confirmPassword.value;
var status=false;
if(fName.length<1)
{
document.getElementById("firstNameLoc").innerHTML=
"<img src='Resource/unchecked.gif'/>Please Enter your First Name";
status=false;
}
else
{
document.getElementById("firstNameLoc").innerHTML=
"<img src="Resource/checked.png"/>Please Enter your First Name";
status=true;
}
return status;
}
</script>
<form name="Log" action="SignUpInsert.php" method="post" onsubmit="return formValidation();return false;">
<label><b>First Name</b></label><span id="firstNameLoc"></span><br>
<input type="text" placeholder="Enter your Last Name" name="firstName"><br>
<label><b>Last Name</b></label><span id="lastNameLoc"></span><br>
<input type="text" placeholder="Enter your Last Name" name="lastName"><br>
<label><b>Pen Name</b></label><span id="penNameLoc"></span><br>
<input type="text" placeholder="Enter your Unique Pen Name" name="penName"><br>
<label><b>Email</b></label><span id="emailLoc"></span><br>
<input type="text" placeholder="Enter your Email" name="email"><br>
<label><b>Password</b></label><span id="passwordLoc"></span><br>
<input type="password" placeholder="Enter your Password" name="password"><br>
<label><b>Confirm Password</b></label><span id="confirmPasswordLoc"></span><br>
<input type="password" placeholder="Enter your Password Again" name="confirmPassword"><br>
<input type="submit" title="Done?" value="Sign Up"><br>
<div class ="contianer">
<button type="button" class="cancelBtn" title="Go Back" onclick="location.href='Main.html'">Cancel</button>
</div>
</form>
</div>
</center>
you almost done. simple quotes problem.you could change like this in your dom else statement
document.getElementById("firstNameLoc").innerHTML = '<img src="Resource/checked.png"/>Please Enter your First Name';
function formValidation() {
var fName = document.Log.firstName.value;
var lName = document.Log.lastName.value;
var pName = document.Log.penName.value;
var email = document.Log.email.value;
var password = document.Log.password.value;
var confirmPassword = document.Log.confirmPassword.value;
var status = false;
if (fName.length < 1) {
document.getElementById("firstNameLoc").innerHTML =
"<img src='Resource/unchecked.gif'/>Please Enter your First Name";
status = false;
} else {
document.getElementById("firstNameLoc").innerHTML = '<img src="Resource/checked.png"/>Done..!';
status = true;
}
return status;
}
<div id="_div2">
<center>
<div class="contianer">
<form name="Log" action="SignUpInsert.php" method="post" onsubmit="return formValidation();return false;">
<label><b>First Name</b></label><span id="firstNameLoc"></span><br>
<input type="text" placeholder="Enter your Last Name" name="firstName"><br>
<label><b>Last Name</b></label><span id="lastNameLoc"></span><br>
<input type="text" placeholder="Enter your Last Name" name="lastName"><br>
<label><b>Pen Name</b></label><span id="penNameLoc"></span><br>
<input type="text" placeholder="Enter your Unique Pen Name" name="penName"><br>
<label><b>Email</b></label><span id="emailLoc"></span><br>
<input type="text" placeholder="Enter your Email" name="email"><br>
<label><b>Password</b></label><span id="passwordLoc"></span><br>
<input type="password" placeholder="Enter your Password" name="password"><br>
<label><b>Confirm Password</b></label><span id="confirmPasswordLoc"></span><br>
<input type="password" placeholder="Enter your Password Again" name="confirmPassword"><br>
<input type="submit" title="Done?" value="Sign Up"><br>
<div class="contianer">
<button type="button" class="cancelBtn" title="Go Back" onclick="location.href='Main.html'">Cancel</button>
</div>
</form>
</div>
</center>
I'm trying to create a simple login example of where if the login details meet a certain username and password, then redirect to a different page after 3 seconds.
This is what i've attempted so far, any help is appreciated
<input type="text" id="username" placeholder="Username" name="uname" maxlength="15" required>
<input type="password" id="password" placeholder="Password" name="psw" maxlength="25" required>
<div id="loginButton">
<button type="button" input id="detailsChecker" onclick="showalert('alert');" label=>Login </button>
</div>
<div id="alert" style="display:none;">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<p id="alertmsg"> </p>
</div>
<div id="alertsuccess" style="display:none;">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<p id="alertmsg"> </p>
function showalert(id) {
var divelement = document.getElementById(id);
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username === "u1460714" && password ==="barney") {
document.getElementById("alertmsg").innerHTML = "Successfully logged in, redirecting in 3 seconds";
setTimeout, window.location = "attendance.html"; 3000;
divelement.style.display = 'block';
divelement.className = 'success'
}
}
You have improperly called the setTimeout() function. It accepts an callback function as the argument, holding the whole code, which has to be delayed.
function showalert(id) {
var divelement = document.getElementById(id);
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username === "u1460714" && password === "barney") {
document.getElementById("alertmsg").innerHTML = "Successfully logged in, redirecting in 3 seconds";
setTimeout(function() {
window.location = "attendance.html";
}, 3000);
divelement.style.display = 'block';
divelement.className = 'success'
}
}
<input type="text" id="username" placeholder="Username" name="uname" maxlength="15" required>
<input type="password" id="password" placeholder="Password" name="psw" maxlength="25" required>
<div id="loginButton">
<button type="button" input id="detailsChecker" onclick="showalert('alert');" label=>Login </button>
</div>
<div id="alert" style="display:none;">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<p id="alertmsg"> </p>
</div>
<div id="alertsuccess" style="display:none;">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<p id="alertmsg"> </p>
There is a form on my page where I want to display a check mark(tick) right beside all input fields. I've already tried a couple of ways to do this but unable to achieve what I want.Below is my code....
$(document).ready(function() {
$("#myForm").on('submit', function(event) {
event.preventDefault();
var firstName = $('#first').val();
var lastName = $('#last').val();
var email = $('#email').val();
var pass = $('#password').val();
if (firstName == "") {
$('#first-name-error').text("Please enter your first name");
} else if (firstName.length > 0) {
$(this).next().show();
}
if (lastName == "") {
$('#last-name-error').text("Please enter your last name");
}
if (email == "") {
$('#email-error').text("Please enter your email address");
} else if (email == "aisha_salman3#outlook.com") {
$('#email-error').text("This email is already taken!");
}
if (pass == "") {
$('#password-error').text("Please enter your password");
} else if (pass.length < 8) {
$('#password-error').text("Short passwords are too easy to guess.Try one with at least 8 characters");
}
});
});
.tick {
background: url(images/done-tick.png) no-repeat;
width: 20px;
height: 20px;
position: absolute;
margin: 5px 20px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<form id="myForm" action="" method="">
<fieldset>
<legend>Create Account</legend>
<div class="form-group">
<label for="first">First Name</label>
<p id="first-name-error"></p>
<input type="text" class="form-control" id="first" maxlength="10" placeholder="your first name ..." autofocus />
<span class="tick"></span>
</div>
<div class="form-group">
<label for="last">Last Name</label>
<p id="last-name-error"></p>
<input type="text" class="form-control" id="last" maxlength="10" placeholder="your last name ..." />
<span class="tick"></span>
</div>
<div class="form-group">
<label for="email">Email</label>
<p id="email-error"></p>
<input type="email" class="form-control" id="email" placeholder="your email ..." />
<span class="tick"></span>
</div>
<div class="form-group">
<label for="password">Password</label>
<p id="password-error"></p>
<input type="password" class="form-control" id="password" placeholder="your password ..." />
<span class="tick"></span>
</div>
</fieldset>
<input class="btn" type="submit" value="Sign Up " />
</form>
</div>
</div>
</div>
</main>
Please guide me.Thank you!
You seem to be referencing this, which is the form element, not the first name. So when you get next, you are not getting an element. Your code should look like:
if (firstName == "") {
$('#first-name-error').text("Please enter your first name");
} else if (firstName.length > 0) {
$('#first').next().show();
}
Here is a fiddle to show how it works. https://jsfiddle.net/ukg82xqr/2/
I have the following form
register.php
<form class="form" action="home.php" method ="POST" enctype="application/x-www-form-urlencoded">
<input type="email" name="email" placeholder="Email Address" id="email"/>
home.php
<script = "text.javasccript>
$('button').on('click', function(){
str = $('input').val();
str = str.split('#').slice(1);
var allowedDomains = [ 'correct.com' ];
if ($.inArray(str[0], allowedDomains) !== -1) {
alert(str + ' is allowed');
}else{
alert('not allowed');
}
});
</script>
I know this question has been asked before but there are no actual answers for it. Where do I integrate the following function to work with the registration form
THIS IS NEW, EDITED CODE BUT DOESNT WORK CAN ANYONE HELP?
My only output message is the one saying that the domain is not allowed even when I type the 'allowed' domain in. Here is my code:
register.php
<fieldset style = "border-radius:30px;">
<legend>Your Personal Details:</legend>
<form class="form" action="staffhome.php" method ="POST" enctype="application/x-www-form-urlencoded">
<br> <input type="text" name="forename" placeholder ="Forename" id="forename"style = "display:inline; float:left;margin-left:5%;"/>
<input type="text" name="surname" placeholder="Surname" id="surname"style = "display:inline; float:left;margin-left:5%;"/>
<input type="email" name="email" placeholder="Email Address" id="email"style = "display:inline; float:left;margin-left:5%;"/><br /><br><br><br>
<script type = "text/javascript">
$('form').on('submit', function(e){
str = $('input').val();
str = str.split('#').slice(1);
var allowedDomains = [ 'wearecallidus.com' ];
if ($.inArray(str[0], allowedDomains) !== -1) {
alert(str + ' is allowed');
}else{
alert('not allowed');
e.preventDefault();
}
});
</script>
<input type="text" name="phone" placeholder="Phone Number" id="phone"style = "display:inline;margin-right:2.5%"/>
<input type="text" name="ext" placeholder="Extension Number" id="ext"style = "display:inline;margin-left:2.5%;"/><br>
</br>
<hr style="border-top: dotted 1px;" />
<br> <input type="text" name="securityq" placeholder="Security Question" id="securityq" size ="32" maxlength ="60" style = "display:inline;"/>
<input type="text" name="securitya" placeholder="Security Answer" id="securitya" size="32"style = "display:inline;"/><br />
<br><input type="password" name="password" id="password" value="" size="32" placeholder="Type A Password" minlength="6"/><br><br>
<input type="password" name="password-check" id="password-check" value="" size="32" placeholder ="Re-Type Your Password" minlength="6"/><br>
</br>
<input id="button" type="submit" value="Register" disabled="disabled" name="submit">
</fieldset>
I get the same output message every time no matter what the input, can anyone tell me why?
I would do this if I were to have the js in the same page instead of externalising it:
<!DOCTYPE html>
<html>
<head>
<title>Form example</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
var allowedDomains = [ 'correct.com' ];
$('#myForm').on('submit', function(e) { // when the form is submitted
var str = $('#email').val(),
domain = str.split('#')[1]; // split on # and take the second part
if ($.inArray(domain, allowedDomains) == -1) {
alert(domain+' not allowed');
e.preventDefault(); // stop form submission
}
});
});
</script>
</head>
<body>
<div id="content">
<form id="myForm" class="form" action="home.php" method ="POST" enctype="application/x-www-form-urlencoded">
<input type="email" name="email" placeholder="Email Address" id="email"/>
<input type="submit" />
</form>
</div>
</body>
</html>
Example
$(function() {
var allowedDomains = ['correct.com'];
$('#myForm').on('submit', function(e) {
var str = $('#email').val(),
domain = str.split('#')[1];
if (!domain) domain="An empty domain"
$("#emailmsg").html("").hide()
if ($.inArray(domain, allowedDomains) == -1) {
$("#emailmsg").html(domain + ' not allowed').show();
e.preventDefault(); // stop form submission
}
});
});
#emailmsg { display:none; color:red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
<form id="myForm" class="form" action="home.php" method="POST" enctype="application/x-www-form-urlencoded">
<input type="email" name="email" placeholder="Email Address" id="email" /> <span id="emailmsg"></span><br/>
<input type="submit" />
</form>
</div>
Using your form after removing the disabled from the submit and added ID="myForm" and a span:
var allowedDomains = ['correct.com'];
function checkEmail(emailId) {
var $email=$("#"+emailId);
var str = $email.val(),domain = str.split('#')[1];
if (!domain) domain = "Empty domain";
if ($.inArray(domain, allowedDomains) == -1) {
$email.attr("placeholder", domain + ' not allowed').addClass("redborder");
}
else {
$email.attr("placeholder", "Email address").removeClass("redborder");
}
}
$(function() {
$('#myForm').on('submit', function(e) {
if (!checkEmail("email")) e.preventDefault(); // stop form submission
});
$("#email").on("keyup, blur",function() { checkEmail("email"); } );
});
.redborder {
border: 1px solid red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<fieldset style="border-radius:30px;">
<legend>Your Personal Details:</legend>
<form id="myForm" class="form" action="staffhome.php" method="POST" enctype="application/x-www-form-urlencoded">
<br>
<input type="text" name="forename" placeholder="Forename" id="forename" style="display:inline; float:left;margin-left:5%;" />
<input type="text" name="surname" placeholder="Surname" id="surname" style="display:inline; float:left;margin-left:5%;" />
<input type="email" name="email" placeholder="Email Address" id="email" style="display:inline; float:left;margin-left:5%;" />
<br>
<br>
<br>
<br>
<input type="text" name="phone" placeholder="Phone Number" id="phone" style="display:inline;margin-right:2.5%" />
<input type="text" name="ext" placeholder="Extension Number" id="ext" style="display:inline;margin-left:2.5%;" />
<br>
</br>
<hr style="border-top: dotted 1px;" />
<br>
<input type="text" name="securityq" placeholder="Security Question" id="securityq" size="32" maxlength="60" style="display:inline;" />
<input type="text" name="securitya" placeholder="Security Answer" id="securitya" size="32" style="display:inline;" />
<br />
<br>
<input type="password" name="password" id="password" value="" size="32" placeholder="Type A Password" minlength="6" />
<br>
<br>
<input type="password" name="password-check" id="password-check" value="" size="32" placeholder="Re-Type Your Password" minlength="6" />
<br>
</br>
<input id="button" type="submit" value="Register" name="mySubmit">
</fieldset>
If you're validating with javascript, I suggest having the script in the same page as the form. Also, since its javascript, why not do it dynamically instead of having to wait for the user to submit?
$('form').on('submit', function(e){
str = $('input').val();
str = str.split('#').slice(1);
var allowedDomains = [ 'correct.com' ];
if ($.inArray(str[0], allowedDomains) !== -1) {
alert(str + ' is allowed');
}else{
alert('not allowed');
e.preventDefault();
}
});
Working fiddle:
https://jsfiddle.net/j84mqq6k/1/
Try with this using jQuery.
var email = $("#email").val();
var atpos = email.indexOf("#");
var dotpos = email.lastIndexOf(".");
if (email === null || email === "") {
alert('Please enter email address.!');
$('#email').focus();
} else if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) {
alert('Please enter valid email address.!');
$('#email').focus();
}
Basically, I want to prepend a div only if the div I'm prepending isn't already showing.
$(".loginForm").submit(function() {
var username = $("input.username").val();
var password = $("input.password").val();
var errorvisible = $("body").has(".alert.error");
if (!username || !password && errorvisible == false) {
$('body').prepend("<div class=\"error alert\">One or more field(s), have been left empty</div>");
setTimeout(function() {
$('.error.alert').fadeOut('1000', function() {
$('.error.alert').remove();
});
}, 6000);
event.preventDefault();
}
});
At the moment, I'm trying to make it so the jquery will only do the if empty if statement if the error isn't currently visible however it's not working...
<div class="pageCont">
<div class="title">
<h1>LetsChat</h1>
<h4>The new way of interaction.</h4>
</div>
<div class="login box">
<form method="POST" action="#" class="loginForm">
<input type="text" class="loginInput username" placeholder="Aquinas Email or Number" /><br>
<input type="password" class="loginInput password" placeholder="Password" /><br>
<div class="checkBox">
<input type="checkbox" id="checkBoxLink">
<label for="checkBoxLink">Remember Me</label>
Forgotten your password?
</div>
<input type="submit" value="Submit" class="login btn green" />
<input type="reset" value="Clear Fields" class="reset btn green" />
</form>
</div>
<div class="signup box">
<form method="POST" action="#" class="signupForm">
<input type="text" class="signupInput" placeholder="First Name" /><br>
<input type="text" class="signupInput" placeholder="Last Name" /><br>
<input type="text" class="signupInput" placeholder="Aquinas Email" /><br>
<input type="password" class="signupInput" placeholder="Password" /><br>
<input type="submit" class="purple btn signup" value="Sign Up Today!">
</form>
</div>
</div>
The below should work if I'm understanding your question correctly?
$(".loginForm").submit(function() {
var username = $("input.username").val();
var password = $("input.password").val();
var errorvisible = $("body").has(".alert.error").length;
if (!username || !password)
{
if(errorvisible == 0)
$('body').prepend("<div class=\"error alert\">One or more field(s), have been left empty</div>");
setTimeout(function() {
$('.error.alert').fadeOut('1000', function() {
$('.error.alert').remove();
});
}, 6000);
event.preventDefault();
}
});
I have used this type of code many times:
if(!$('#myFancyDiv').is(':visible')) {
//prepend or do whatever you want here
}
BTW just for clarity, this code checks if 'myFancyDiv' is not visible.
You can check whether the .error.alert elements exists, if so don't do anything else create a new one
$(".loginForm").submit(function() {
var username = $("input.username").val();
var password = $("input.password").val();
var errorvisible = $("body").has(".alert.error");
if (!username || !password && errorvisible == false) {
if (!$('.error.alert').length) {
$('body').prepend("<div class=\"error alert\">One or more field(s), have been left empty</div>");
setTimeout(function() {
$('.error.alert').fadeOut('1000', function() {
$(this).remove();
});
}, 6000);
}
event.preventDefault();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="#" class="loginForm">
<input type="text" class="loginInput username" placeholder="Aquinas Email or Number" />
<br>
<input type="password" class="loginInput password" placeholder="Password" />
<br>
<div class="checkBox">
<input type="checkbox" id="checkBoxLink">
<label for="checkBoxLink">Remember Me</label>
Forgotten your password?
</div>
<input type="submit" value="Submit" class="login btn green" />
<input type="reset" value="Clear Fields" class="reset btn green" />
</form>