From f43e3b0af6fa41a5c674cf156a85058771aaf6c9 Mon Sep 17 00:00:00 2001 From: EngAyoosh Date: Wed, 23 Aug 2017 17:58:10 +0300 Subject: [PATCH] validation --- public/index.html | 9 +-- public/js/index.js | 46 ++++++++++++++ public/js/sign_up.js | 144 +++++++++++++++++++++++++++++++++++++++++++ public/sign_up.html | 17 +++-- 4 files changed, 206 insertions(+), 10 deletions(-) diff --git a/public/index.html b/public/index.html index 6888252..306a641 100644 --- a/public/index.html +++ b/public/index.html @@ -24,11 +24,12 @@

Publish your passions, your way

- - + + + + + If you don't have account - -
diff --git a/public/js/index.js b/public/js/index.js index e69de29..447f656 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -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 = 'Please enter your username
Your name must be a string'; + username.style = 'border-color:red'; + username.focus(); + return false; + } else { + return true; + } +} + +function ValidPass (pass) { + if (typeof pass.value !== 'string' || pass.value === '') { + msg.innerHTML = 'Please enter your password
Your password must be a string'; + 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); + // }); + } +}); diff --git a/public/js/sign_up.js b/public/js/sign_up.js index e69de29..8f039ad 100644 --- a/public/js/sign_up.js +++ b/public/js/sign_up.js @@ -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 = 'Please enter your username'; + str.style = 'border-color:red'; + str.focus(); + return false; + } else if ((str.value.length < 5) || (str.length > 15)) { + validName.innerHTML = 'Username must have 5-15 characters'; + str.style = 'border-color:red'; + str.focus(); + return false; + } else if (illegalChars.test(str.value)) { + validName.innerHTML = 'Please enter valid Username. Use only numbers and alphabets'; + 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 = 'Please enter your password
Your confirm password must have length 6-15'; + pass.style = 'border-color:red'; + pass.focus(); + return false; + } else { + msg.innerHTML = 'Please enter your password'; + 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 = 'Please confirm your password
Your password must have length 6-15'; + pass.style = 'border-color:red'; + conf.focus(); + return false; + } else { + msg.innerHTML = 'Please confirm your password'; + conf.style = 'border-color:red'; + conf.focus(); + return false; + } + } else if (pass.value.length === 0 && conf.value.length === 0) { + msg.innerHTML = 'Enter your password and confirm password'; + 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 = 'Your password and confirm password should be the same !'; + 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 = 'Your password must have length 6-15'; + 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 = 'Please enter your email'; + email.style = 'border-color:red'; + email.focus(); + return false; + } else if (!result) { + validEmail.innerHTML = 'Please enter valid email'; + 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 = 'Strong!'; + } else if (mediumRegex.test(pass.value)) { + strength.innerHTML = 'Medium!'; + } else { + strength.innerHTML = 'Weak!'; + } +} + +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; + // } +}); diff --git a/public/sign_up.html b/public/sign_up.html index d3f804c..6f05514 100644 --- a/public/sign_up.html +++ b/public/sign_up.html @@ -20,14 +20,19 @@

SIGNUP

- - - - - -
+ + + + + + Type Password ^_^ + + + +
+