Skip to content

validation #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
EngAyoosh wants to merge 1 commit into
base: master
Choose a base branch
from
Open

validation #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,12 @@ <h1>Publish your passions, your way</h1>

<section>
<form class="form" action="/login" method="POST">
<input type="text" name="name" value="" placeholder="name ...." required>
<input type="text" name="password" value="" placeholder="Password ...." required>
<input id="name" type="text" name="name" value="" placeholder="Name ....">
<span class="errorMsg" id="validName"></span>
<input id="password" type="password" name="password" value="" placeholder="Password ....">
<span class="errorMsg" id="message"></span>
<button id="subLog" type="submit" name="button">Login</button>
<span><a href="./signup">If you don't have account</a></span>

<button type="submit">login</button>
</form>
</section>
<script src='./js/request.js'></script>
Expand Down
46 changes: 46 additions & 0 deletions public/js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
var username = document.getElementById('name');
var pass = document.getElementById('password');
var subLog = document.querySelector('.form');
var msg = document.getElementById('message');
var validName = document.getElementById('validName');

function validUsername (username) {
if (typeof username.value !== 'string' || username.value === '') {
validName.innerHTML = '<span style="color:red">Please enter your username<br>Your name must be a string</span>';
username.style = 'border-color:red';
username.focus();
return false;
} else {
return true;
}
}

function ValidPass (pass) {
if (typeof pass.value !== 'string' || pass.value === '') {
msg.innerHTML = '<span style="color:red">Please enter your password<br>Your password must be a string</span>';
pass.style = 'border-color:red';
pass.focus();
return false;
} else {
return true;
}
}

subLog.addEventListener('submit', function (event) {
event.preventDefault();
validName.innerHTML = '';
msg.innerHTML = '';
username.style = 'border:none; border-bottom: 1px solid lightgrey;';
pass.style = 'border:none; border-bottom: 1px solid lightgrey;';

var vn = validUsername(username);
var vp = ValidPass(pass);
if (vn && vp) {
// apiReq('/login', 'POST', (response, err) => {
// if (err) {
// console.log(err);
// }
// console.log(response);
// });
}
});
144 changes: 144 additions & 0 deletions public/js/sign_up.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
var username = document.getElementById('nameSign');
var email = document.getElementById('emailSign');
var pass = document.getElementById('passSign');
var conf = document.getElementById('confSign');
var msg = document.getElementById('message');
var strength = document.getElementById('strength');
var validName = document.getElementById('validName');
var validEmail = document.getElementById('validEmail');
var subSign = document.getElementById('subSign');

function validateUsername (str) {
var illegalChars = /\W/; // allow letters, numbers, and underscores

if (str.value === '') {
validName.innerHTML = '<span style="color:red">Please enter your username</span>';
str.style = 'border-color:red';
str.focus();
return false;
} else if ((str.value.length < 5) || (str.length > 15)) {
validName.innerHTML = '<span style="color:red">Username must have 5-15 characters</span>';
str.style = 'border-color:red';
str.focus();
return false;
} else if (illegalChars.test(str.value)) {
validName.innerHTML = '<span style="color:red">Please enter valid Username. Use only numbers and alphabets</span>';
str.style = 'border-color:red';
str.focus();
return false;
} else {
validName.innerHTML = '';
return true;
}
}

function ValidatePass (pass, conf) {
pass.value.trim();
conf.value.trim();
if (pass.value.length === 0 && conf.value.length !== 0) {
if ((conf.value.length < 6) || (conf.value.length > 15)) {
msg.innerHTML = '<span style="color:red">Please enter your password<br>Your confirm password must have length 6-15</span>';
pass.style = 'border-color:red';
pass.focus();
return false;
} else {
msg.innerHTML = '<span style="color:red">Please enter your password</span>';
pass.style = 'border-color:red';
pass.focus();
return false;
}
} else if (conf.value.length === 0 && pass.value.length !== 0) {
if ((pass.value.length < 6) || (pass.value.length > 15)) {
msg.innerHTML = '<span style="color:red">Please confirm your password<br>Your password must have length 6-15</span>';
pass.style = 'border-color:red';
conf.focus();
return false;
} else {
msg.innerHTML = '<span style="color:red">Please confirm your password</span>';
conf.style = 'border-color:red';
conf.focus();
return false;
}
} else if (pass.value.length === 0 && conf.value.length === 0) {
msg.innerHTML = '<span style="color:red">Enter your password and confirm password</span>';
pass.style = 'border-color:red';
conf.style = 'border-color:red';
pass.focus();
return false;
} else if (pass.value.length !== 0 && conf.value.length !== 0 && pass.value !== conf.value) {
msg.innerHTML = '<span style="color:red">Your password and confirm password should be the same !</span>';
pass.style = 'border-color:red';
conf.style = 'border-color:red';
pass.focus();
conf.focus();
return false;
} else if (pass.value.length !== 0 && pass.value === conf.value) {
if ((pass.value.length < 6) || (pass.value.length > 15)) {
msg.innerHTML = '<span style="color:red">Your password must have length 6-15</span>';
pass.style = 'border-color:red';
pass.focus();
return false;
}
} else {
return true;
}
}

function ValidateEmail (myEmail) {
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (email.value.match(mailformat)) {
return true;
} else {
return false;
}
}

function validEmailFun (email) {
var result = ValidateEmail(email);
if (email.value.length === 0) {
validEmail.innerHTML = '<span style="color:red">Please enter your email</span>';
email.style = 'border-color:red';
email.focus();
return false;
} else if (!result) {
validEmail.innerHTML = '<span style="color:red">Please enter valid email</span>';
email.style = 'border-color:red';
email.focus();
return false;
} else {
return true;
}
}

function passwordChanged () {
var strongRegex = new RegExp('^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$', 'g');
var mediumRegex = new RegExp('^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$', 'g');
var enoughRegex = new RegExp('(?=.{6,}).*', 'g');
if (pass.value.length === 0) {
strength.innerHTML = 'Type Password';
} else if (enoughRegex.test(pass.value) === false) {
strength.innerHTML = 'More Characters';
} else if (strongRegex.test(pass.value)) {
strength.innerHTML = '<span style="color:green">Strong!</span>';
} else if (mediumRegex.test(pass.value)) {
strength.innerHTML = '<span style="color:orange">Medium!</span>';
} else {
strength.innerHTML = '<span style="color:red">Weak!</span>';
}
}

pass.addEventListener('keyup', passwordChanged);

subSign.addEventListener('click', function (event) {
validName.innerHTML = '';
validEmail.innerHTML = '';
msg.innerHTML = '';
username.style = 'border:none; border-bottom: 1px solid lightgrey;';
email.style = 'border:none; border-bottom: 1px solid lightgrey;';
pass.style = 'border:none; border-bottom: 1px solid lightgrey;';
conf.style = 'border:none; border-bottom: 1px solid lightgrey;';

// if (validateUsername(username) && validEmailFun(email) && ValidatePass(pass, conf)) {
// subSign.disabled = false;
// }
});
17 changes: 11 additions & 6 deletions public/sign_up.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,19 @@ <h1>SIGNUP</h1>

<section>
<form class="form" action="/sign-up" method="POST">
<input type="text" name="name" value="" placeholder="name ...." required>
<input type="text" name="email" value="" placeholder="email ...." required>
<input type="text" name="password" value="" placeholder="Password ...." required>
<input type="text" name="confirm_password" value="" placeholder="Renter Password ...." required>
<button type="submit" name="button">signup</button>
</form>
<input id="nameSign" type="text" name="name" value="" placeholder="Name ....">
<span class="errorMsg" id="validName"></span>
<input id="emailSign" type="text" name="email" value="" placeholder="Email ....">
<span class="errorMsg" id="validEmail"></span>
<input id="passSign" type="password" name="password" value="" placeholder="Password ....">
<span id="strength">Type Password ^_^</span>
<input id="confSign" type="password" name="confirm_password" value="" placeholder="Confirm Password ....">
<span class="errorMsg" id="message"></span>
<button id="subSign" type="submit" name="button">signup</button>
</form>
</section>

<script type="text/javascript" src="./js/request.js"></script>
<script type="text/javascript" src="./js/sign_up.js"></script>
</body>
</html>