Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.06.2021, 13:34
Новичок на форуме
Отправить личное сообщение для Janejane Посмотреть профиль Найти все сообщения от Janejane
 
Регистрация: 09.05.2021
Сообщений: 9

Вызов следующего файла
Добрый день,

После проверки ввода username, email и password и нажатии на кнопку "Enter" должны вызвать следующий файл "new.html", который запомнит имя пользователя при условии правильного ввода почтового адреса и пароля.
В этом у меня проблема, не знаю как записать

<button class="button button1">Enter</button>



<form id="form" class="form">	
		<div class="main">		
			<div class="form-control">
				<input class="reg_input" type="text" placeholder="Username" id="username" />
				<i class="fas fa-check-circle"></i>
				<i class="fas fa-exclamation-circle"></i>
				<small>Error message</small>
			</div>			
			<div class="form-control">
				<input class="reg_input" type="email" placeholder="Email" id="email" />
				<i class="fas fa-check-circle"></i>
				<i class="fas fa-exclamation-circle"></i>
				<small>Error message</small>
			</div>	
			<div class="form-control">
				<input class="reg_input" type="password" placeholder="Password" id="password"/>
				<i class="fas fa-check-circle"></i>
				<i class="fas fa-exclamation-circle"></i>
				<small>Error message</small>
			</div>		
		</div>
		<button class="button button1">Enter</button>
	</form>




const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');

form.addEventListener('submit', e => {
	e.preventDefault();
	
    checkInputs();
    let user = checkInputs()
    if (user.isValid){
        localStorage.setItem("user",JSON.stringify(user))
    }
});

function checkInputs() {
	// trim to remove the whitespaces
	const usernameValue = username.value.trim();
	const emailValue = email.value.trim();
	const passwordValue = password.value.trim();
	const password2Value = password2.value.trim();
    
    let isValid = true
    
	if(usernameValue === '') {
        setErrorFor(username, 'Username cannot be blank');
        isValid = false
	} else {
		setSuccessFor(username);
	}
	
	if(emailValue === '') {
        setErrorFor(email, 'Email cannot be blank');
        isValid = false
	} else if (!isEmail(emailValue)) {
		setErrorFor(email, 'Not a valid email');
        isValid = false
	} else {
		setSuccessFor(email);
	}
	
	if(passwordValue === '') {
		setErrorFor(password, 'Password cannot be blank');
        isValid = false
	} else {
		setSuccessFor(password);
	}
	
	if(password2Value === '') {
		setErrorFor(password2, 'Password2 cannot be blank');
        isValid = false
	} else if(passwordValue !== password2Value) {
		setErrorFor(password2, 'Passwords does not match');
        isValid = false
	} else{
		setSuccessFor(password2);
    }
    
    return {usernameValue,emailValue,passwordValue, isValid}

}

function setErrorFor(input, message) {
	const formControl = input.parentElement;
	const small = formControl.querySelector('small');
	formControl.className = 'form-control error';
	small.innerText = message;
}

function setSuccessFor(input) {
	const formControl = input.parentElement;
	formControl.className = 'form-control success';
}
	
function isEmail(email) {
	return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}
// SOCIAL PANEL JS
const floating_btn = document.querySelector('.floating-btn');
const close_btn = document.querySelector('.close-btn');
const social_panel_container = document.querySelector('.social-panel-container');

floating_btn.addEventListener('click', () => {
	social_panel_container.classList.toggle('visible')
});

close_btn.addEventListener('click', () => {
	social_panel_container.classList.remove('visible')
});
Ответить с цитированием
  #2 (permalink)  
Старый 19.06.2021, 13:58
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,610

Janejane, а на чем у вас сайт, какая CMS, обычно там регистрация пользователей предусмотрена? Как минимум нужен сервер, серверный язык и база данных, чтобы делать регистрацию на сайте.
Ответить с цитированием
  #3 (permalink)  
Старый 19.06.2021, 14:08
Новичок на форуме
Отправить личное сообщение для Janejane Посмотреть профиль Найти все сообщения от Janejane
 
Регистрация: 09.05.2021
Сообщений: 9

Это просто задание такое, нужно просто вызвать другой файл и чтобы он помнил имя пользователя. Использую только html файлы, css и js.
Ответить с цитированием
  #4 (permalink)  
Старый 19.06.2021, 14:19
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,610

Janejane, понятно, ты уже записал (запомнил) в этом файле в строке localStorage.setItem("user",JSON.stringify(user)), в new.html ты можешь сделать обратное действие, прочитать, let user = JSON.parse(localStorage.getItem("user")) и вывести в нужном месте.
Ответить с цитированием
  #5 (permalink)  
Старый 19.06.2021, 18:45
Новичок на форуме
Отправить личное сообщение для Janejane Посмотреть профиль Найти все сообщения от Janejane
 
Регистрация: 09.05.2021
Сообщений: 9

Оказывается немного неверно была поставлена задача. В общем:

index.html
Username (Вводим имя)
Email (Вводим почту)
Password (Вводим пароль)
Registration (Кнопка для вызова следующего файла, где вводится имя и пароль и в этом файле произойдет проверка с данными первого файла)

index.html
<script src="main.js"></script>	
</head>
 <body>
 	<form id="form" class="form">	
		<div class="mtavari">		
			<div class="form-control">
				<input class="reg_input" type="text" placeholder="Username" id="username" />
				<i class="fas fa-check-circle"></i>
				<i class="fas fa-exclamation-circle"></i>
				<small>Error message</small>
			</div>			
			<div class="form-control">
				<input class="reg_input" type="email" placeholder="Email" id="email" />
				<i class="fas fa-check-circle"></i>
				<i class="fas fa-exclamation-circle"></i>
				<small>Error message</small>
			</div>	
			<div class="form-control">
				<input class="reg_input" type="password" placeholder="Password" id="password"/>
				<i class="fas fa-check-circle"></i>
				<i class="fas fa-exclamation-circle"></i>
				<small>Error message</small>
			</div>	
        <div class="form-control">
            <a class="button button1" href="login.html">Registration</a>
        </div>			
		</div>
	</form>



login.html
Username (Вводим имя)
Password (Вводим пароль)
Login (кнопка для проверки имени и пароля с данными index.html и если всё верно, то вызовет следующий файл)

login.html

<script src="main.js"></script>	
<script>
	let user = JSON.parse(localStorage.getItem("user"))	
</script>
</head>
 <body>
 	<form id="form" class="form">	
		<div class="mtavari">		
			<div class="form-control">
				<input class="reg_input" type="text" placeholder="Username" id="username" />
				<i class="fas fa-check-circle"></i>
				<i class="fas fa-exclamation-circle"></i>
				<small>Error message</small>
			</div>			
			<div class="form-control">
				<input class="reg_input" type="password" placeholder="Password" id="password"/>
				<i class="fas fa-check-circle"></i>
				<i class="fas fa-exclamation-circle"></i>
				<small>Error message</small>
			</div>	
        <div class="form-control">
            <a class="button button1" href="watch_1.html">Login</a>
        </div>			
		</div>
	</form>


В login.html должна произойти проверка имени и пароля, чтонепонятно пока как сделать.
В main.js у меня находится сам код, который в первом сообщении был указан.
Ответить с цитированием
  #6 (permalink)  
Старый 19.06.2021, 20:32
Новичок на форуме
Отправить личное сообщение для Janejane Посмотреть профиль Найти все сообщения от Janejane
 
Регистрация: 09.05.2021
Сообщений: 9

В login.html добавлен код, но всё равно не работает

<script>
let user = JSON.parse(localStorage.getItem("user"))
let password = JSON.parse(localStorage.getItem("password"))

function check() {
	if(username2Value === '') {
		setErrorFor(username2, 'Username cannot be blank');
        isValid = false
	} else if(username2Value !== usernameValue) {
		setErrorFor(username2, 'Username does not match');
        isValid = false
	} else{
		setSuccessFor(username2);
    }

	if(password2Value === '') {
		setErrorFor(password2, 'Password cannot be blank');
        isValid = false
	} else if(passwordValue !== password2Value) {
		setErrorFor(password2, 'Passwords does not match');
        isValid = false
	} else{
		setSuccessFor(password2);
    }
</script>
Вложения:
Тип файла: zip login.zip (6.1 Кб, 0 просмотров)
Ответить с цитированием
  #7 (permalink)  
Старый 19.06.2021, 22:18
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,610

Janejane,

index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Index</title>
</head>
<body>
    <a href="signin.html">Sign in</a> | <a href="signup.html">Sign up</a>
</body>
</html>

signup.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sign up</title>
    <script src="signup.js"></script>
</head>
<body>
    <form name="signup">
        <input type="text" name="username" placeholder="Username" required>
        <input type="email" name="email" placeholder="Email" required>
        <input type="password" name="password" placeholder="Password" required>
        <button>Sign up</button>
    </form>
</body>
</html>

signup.js
document.addEventListener('DOMContentLoaded', function() {
    this.signup.addEventListener('submit', function(event) {
        event.preventDefault();
        const database = JSON.parse(localStorage.getItem('database')) || [];
        const newUser = { username: this.username.value, email: this.email.value, password: this.password.value };
        const isUser = database.some(oldUser => newUser.username == oldUser.username);
        if (isUser) return alert('Username is taken');
        database.push(newUser);
        localStorage.setItem('database', JSON.stringify(database));
        location.href = 'signin.html';
    });
});

signin.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sign in</title>
    <script src="signin.js"></script>
</head>
<body>
    <form name="signin">
        <input type="text" name="username" placeholder="Username" required>
        <input type="password" name="password" placeholder="Password" required>
        <button>Sign in</button>
    </form>
</body>
</html>

signin.js
document.addEventListener('DOMContentLoaded', function() {
    this.signin.addEventListener('submit', function(event) {
        event.preventDefault();
        const database = JSON.parse(localStorage.getItem('database')) || [];
        const newUser = { username: this.username.value, password: this.password.value };
        const isUser = database.some(oldUser => newUser.username == oldUser.username && newUser.password == oldUser.password);
        if (!isUser) return alert('Incorrect username or password');
        location.href = 'content.html';
    });
});

content.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Content</title>
</head>
<body>
    Content
</body>
</html>
Ответить с цитированием
  #8 (permalink)  
Старый 19.06.2021, 23:26
Новичок на форуме
Отправить личное сообщение для Janejane Посмотреть профиль Найти все сообщения от Janejane
 
Регистрация: 09.05.2021
Сообщений: 9

Rise,

Огромное спасибо, переделала под свой вариант и по-моему получилось так, как нужно было. Завтра мне уже точнее скажут, так надо было сделать или нет. Но по-моему всё сделано так, как нужно.
В самой логике тоже разобралась и поняла, где и в чем я ошибалась.
Еще раз спасибо!!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вызов функции из другого файла dmitriy94 Общие вопросы Javascript 11 10.04.2015 13:58
Вызов функции вложенного файла sasha-js Events/DOM/Window 3 16.07.2014 00:41
Вызов js-функции из определенного файла Ceргей Общие вопросы Javascript 4 23.08.2012 10:44
Помогите: Вызов окна сохранения файла greatilya Общие вопросы Javascript 2 01.08.2008 13:56
Вызов функции из файла. Phoenix Общие вопросы Javascript 2 21.11.2007 21:49