Unable to reload the same page after clicking submit button - javascript

I'm making a login page where if the email address already exists i want to stay on the same page and prompt the user that the email address already exists.
Here is the function which is the onClick function that will be called when the button is clicked
function login() {
var username = document.getElementById("username").value;
var pword = document.getElementById("pword").value;
var confpwd = document.getElementById("confpwd").value;
var email = document.getElementById("email").value;
var fname = document.getElementById("fname").value;
var lname = document.getElementById("lname").value;
var gender = document.getElementById("gender").value;
var t = 1;
if (t.toString() !== '0') {
var er = "Email-id already exists";
event.preventDefault();
document.getElementById("nemail").value = er;
document.getElementById("username").value = username;
document.getElementById("pword").value = "";
document.getElementById("confpwd").value = "";
document.getElementById("fname").value = fname;
document.getElementById("lname").value = lname;
document.getElementById("gender").value = gender;
}
}

You must pass a function to the <form onsubmit="return login()">. The login function must return true if you want to submit and false otherwise. See this answer for more details: JavaScript code to stop form submission
Working codepen to illustrate: http://codepen.io/DeividasK/pen/YZqwLO

Depending on how your code is setup to submit. You may just need to insert a return when the code realizes the email address is a duplicate. Something along this path might help prevent the page from moving forward.
if (ListOfExistingEmails.indexof(email) > 0 ) return false;

Related

jQuery / JavaScript test for email && checkbox validation

How do I test for form validation for both variables: emailAddr && items[].
items[] is a checkbox array.
Currently the code below won't submit the form at all.
jQuery(document).ready(function(){
var re = /(\w+)\#(\w+)\.[a-zA-Z]/g;
var email = document.getElementById("emailAddr");
var emailValue = email.value;
var testEmail = re.test(emailValue);
jQuery("#submitForm").on("click",function(){
if (jQuery("input[name*='items']").is(":checked"),
testEmail === true){
return true;
} else {
jQuery('#messages').append("You must choose at least 1 image<br>
Please enter a valid email");
return false;
}
});
});
Cleaning up the code a little to check for the value on submission may help but I do not know exactly how the html is formatted to see why else the form may not be submitting.
var re = /(\w+)\#(\w+)\.[a-zA-Z]/g;
var email = document.getElementById("emailAddr");
jQuery("#submitForm").on("click",function(e){
var emailValue = email.value;
var testEmail = re.test(emailValue);
if (jQuery("input[name*='items']").is(":checked") && testEmail === true){
return true;
} else {
e.preventDefault(); // prevents the form from submitting if invalid
jQuery('#messages').append("You must choose at least 1 image<br>Please enter a valid email");
return false;
}
});

Form validation does nothing to the form, NO HTML, ONLY JS

I am trying to learn JS so i am writing code only in JS (there is only up to the body tag in my html code that uses the script).
I am trying in the condition mentioned above, to write a login form and validate it with a validation function.
For some reason nothing happens when I submit the form (I believe its not even calling the validate function, since I put an alert in the beginning of it).
My code:
function validateLogin() {
alert("CHECK");
var username = document.getElementById('username').value;
var pass = document.getElementById('pass').value;
if (username === "admin" && pass === "admin") {
return true;
} else {
alert("Wrong username or password!");
return false;
}
}
var loginDiv = document.createElement('div');
loginDiv.className = 'loginDiv';
var loginForm = document.createElement('form');
loginForm.className = 'loginForm';
loginForm.onsubmit = "return validateLogin()";
var username = document.createElement('input');
username.id = 'username';
var pass = document.createElement('input');
pass.id = 'pass';
pass.type = 'password';
var subm = document.createElement('input');
subm.type = 'submit';
loginForm.appendChild(document.createTextNode("Username:"));
loginForm.appendChild(username);
loginForm.appendChild(document.createElement('br'));
loginForm.appendChild(document.createTextNode("Password:"));
loginForm.appendChild(pass);
loginForm.appendChild(document.createElement('br'));
loginForm.appendChild(subm);
loginForm.action = "#";
loginForm.method = "post";
loginDiv.appendChild(loginForm);
document.body.appendChild(loginDiv);
edit I found that changing
loginForm.onsubmit = "return validateLogin()";
into
loginForm.onsubmit = validateLogin;
solved it for me, for some reason.
First of all you're targeting the DOM object, not the value.
Instead of:
var username = document.getElementById('username');
use:
var username = document.getElementById('username').value;
Of course this is not a good way to build an authentication system, but since it's for learning purposes, we'll go on with it. I would also not recommend using all these "appendChild" functions to create HTML.
There are better ways of doing it. Look into things like MuschacheJS and how they do rendering.
Edit:
You also need to call the function validateLogin();
You could do it like this:
document.getElementById("submitButton").addEventListener("click", function(e) {
validateLogin();
});
This code assumes that there is a button with id submitButton, but you already know how to create that.
Change your button code to the following:
var subm = document.createElement('button');
subm.innerHTML = 'click me';
subm.onclick = validateLogin();
subm.type = 'submit';
Your onsubmit attribute is not added to your form. To fix this, use .setAttribute as you can see in the code below.
A second problem is, that you don't get the value of your input fields, but the full node. For that, you need to append .value.
If you don't want that the page reloads (or redirects to any page given in the action attribute of your form when true login credentials, prepend event.preventDefault() to your validateLogin().
function validateLogin() {
alert("CHECK");
var username = document.getElementById('username').value;
var pass = document.getElementById('pass').value;
if(username === "admin" && pass ==="admin"){
return true;
} else{
alert("Wrong username or password!");
return false;
}
}
var loginDiv = document.createElement('div');
loginDiv.className = 'loginDiv';
var loginForm = document.createElement('form');
loginForm.className = 'loginForm';
// .setAttribute() allows to set all kind of attributes to a node
loginForm.setAttribute("onsubmit", "return validateLogin()");
var username = document.createElement('input');
username.id = 'username';
var pass = document.createElement('input');
pass.id = 'pass';
pass.type = 'password';
var subm = document.createElement('input');
subm.type = 'submit';
loginForm.appendChild(document.createTextNode("Username:"));
loginForm.appendChild(username);
loginForm.appendChild(document.createElement('br'));
loginForm.appendChild(document.createTextNode("Password:"));
loginForm.appendChild(pass);
loginForm.appendChild(document.createElement('br'));
loginForm.appendChild(subm);
loginForm.action = "#";
loginForm.method = "post";
loginDiv.appendChild(loginForm);
document.body.appendChild(loginDiv);

i need help for login page

I need help for a login page using JavaScript. So far I have following code:
function clicked() {
var user = document.getElementById('username');
var pass = document.getElementById('password');
var coruser = "admin";
var corpass = "admin";
if (user.value == coruser) {
if (pass.value == corpass) {
// Like you must login to see the page
} else {
window.alert("incorrect password or name");
}
} else {
window.alert("incorrect password or name");
}
}
I want it like after login show the page like you must login to see the page.
Any ideas?
Your function should look like this if you want to redirect user to your home page after checking the username.
function clicked() {
var user = document.getElementById('username');
var pass = document.getElementById('password');
var coruser = "admin";
var corpass = "admin";
if (user.value == coruser) {
if (pass.value == corpass) {
window.location.href = "your page url";
} else {
window.alert("incorrect password or name");
}
} else {
window.alert("incorrect password or name");
}
}
Note: this is not a way to handle authentication.

Trying to use Local Storage for Reg/Login

I am trying to use local storage to make a basic registration and login screen.
I have managed to get all the basics running but I can't get the fields to save to the local storage to them pull for the login process. I do not believe the HTML is wrong but the Javascript.
Here is the JS:
function save() {
var inputUserName = document.getElementById('regusername');
var inputPassWord = document.getElementById('regpassword');
var inputEmail = document.getElementById('regemail');
localStorage.setItem('username', inputUserName.value);
localStorage.setItem('email', inputEmail.value);
localStorage.setItem('password', inputPassWord.value);
}
function check() {
// Getting data from the register-form
var inputUserName = localStorage.getItem('username');
var inputPassWord = localStorage.getItem('password');
var username = document.getElementById('username');
var password = document.getElementById('password');
if (username.value == inputUserName && password.value == inputPassWord) {
alert('You have successfully logged in' + inputUserName);
} else {
alert('ERROR')
for(var i = 0; i < localStorage.length; i++){
alert(localStorage.key(i));
}
}
}
I figured it out, it was my HTML I had a name="Name" and it seemed to collide with the input that the user had changing to whatever was in the name="" in this case being Name, Email and Password.
If you want to get the input of the user in a specific field, you need to use something like:
document.getElementById('username').value;
You forgot to add the .value at the end.

javascript onBlur not working, and how to connect javascript files

I have two javascript files that I am using to validate an email address.
validate.js:
function checkEmail(userEmail) {
var email = userEmail
var emailFilter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (emailFilter.test(email.value)) {
//alert('Please provide a valid email address');
//email.focus;
return true;
}
else{
return false
}
}
navigation.js EDIT:
$(document).ready(function() {
//ADDED IMPORTS
var imported = document.createElement('script');
imported.src = 'lib/validation.js';
document.head.appendChild(imported);
console.log("DOCUMENT IS READY!");
var viewsWrapper = $("#views-wrapper");
var loginButton = $("#login-button");
var registerButton = $("#register-button");
// Login Link
// TODO: Unclear if needed
$("ul li.login").click(function() {
$.get('/login', function(data) {
viewsWrapper.html(data);
});
});
$('#usernamefield').blur(function() {
var sEmail = $('#usernamefield').val();
if ($.trim(sEmail).length == 0) {
alert('Please enter valid email address');
e.preventDefault();
}
if (checkEmail(sEmail)) {
alert('Email is valid');
}
else {
alert('Invalid Email Address');
e.preventDefault();
}
});
...(more code follows but not relevant)
I am also using this jade template:
login.jade:
form(action="")
key EMAIL
input(type="text", name="username", id="usernamefield")
p hello world
br
key PASSWORD
input(type="text", name="password", id="passwordfield")
p hello world
br
input(type="submit", name="loginButton", id="login-button", value="LOGIN")
My issue is that when I input something into my email field, I do not get an alert message in any case. Am I allowed to just have to separate javascript files and call the methods I defined in validate.js within navigation.js? I tried putting the validate.js code in navigation.js, but even then it did not work. I would like to keep the files separate. Am I missing something obvious? I want it so that once the user inputs the email, and leaves the field, a message should appear warning if the email is valid or not.
Your help is appreciated.
Is it the blur Event or the checkEmail the problem? try to put a alert() or console.log() just after your blur (and make sure to lose focus on your input). Seperate file shouldn't be a problem. And also have you check for errors in your console ?
JavaScript string has no "value" field
After
var sEmail = $('#username').val();
sEmail becomes a string.
You are passing this string to checkEmail method and try to get "value" from a string:
if(!emailFilter.test(email.value)) {//...}
Replace to
if (!emailFilter.test(email)) {//...}
You are already sending the value of email into checkemail function. So in checkEmail function in validate.js remove email.value in second line of function checkEmail
function checkEmail(userEmail) {
var email = userEmail
var emailFilter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!emailFilter.test(email)) {
//alert('Please provide a valid email address');
email.focus;
return false;
}
}

Categories

Resources