Skip to content

Commit

Permalink
Update v1
Browse files Browse the repository at this point in the history
  • Loading branch information
@theSwapnilZambare
theSwapnilZambare committed Jul 3, 2022
1 parent e63bc17 commit 82e6fc6
Show file tree
Hide file tree
Showing 7 changed files with 94 additions and 93 deletions.
0 ...ct_Typing_Tester_App/18_Mini_Project.html → ...ct_Typing_Tester_App/18_Mini_Project.html
View file
File renamed without changes.
0 ..._Mini_Project_Typing_Tester_App/script.js → ..._Mini_Project_Typing_Tester_App/script.js
View file
File renamed without changes.
0 ...Mini_Project_Typing_Tester_App/styles.css → ...Mini_Project_Typing_Tester_App/styles.css
View file
File renamed without changes.
0 ...9_Form_Validation/19_Form_Validation.html → ...9_Form_Validation/19_Form_Validation.html
View file
File renamed without changes.
186 changes: 93 additions & 93 deletions ...riptBasic/19_Form_Validation/19_script.js → ...ptProject/19_Form_Validation/19_script.js
View file
Original file line number Diff line number Diff line change
@@ -1,94 +1,94 @@
// Get HTML Elements
var usernameElement = document.querySelector('#username');
var emailElement = document.querySelector('#email');
var passwordElement = document.querySelector('#password');
var confirmPasswordElement = document.querySelector('#password_confirm');
// Get Error Msg Elements
var nameError = document.querySelector('#name_error');
var emailError = document.querySelector('#email_error');
var passwordError = document.querySelector('#password_error');
// Add Event Listeners for 'blur' event
usernameElement.addEventListener('blur',function() {
clearErrorMessage(usernameElement,nameError);
});
emailElement.addEventListener('blur',function() {
clearErrorMessage(emailElement,emailError);
});
passwordElement.addEventListener('blur',function() {
clearErrorMessage(passwordElement,passwordError);
clearErrorMessage(confirmPasswordElement,passwordError);
});
confirmPasswordElement.addEventListener('blur',function() {
clearErrorMessage(confirmPasswordElement,passwordError);
clearErrorMessage(passwordElement,passwordError);
});
function validate() {
var result = true;
// Required UserName validation
if(usernameElement.value === ''){
displayErrorMessage(usernameElement,nameError,'User Name is Required');
result = false;
return result;
}
// Username Length Validation
if(usernameElement.value.length < 5){
displayErrorMessage(usernameElement,nameError,'Add At least 5 letters');
result = false;
return result;
}
// Twitter UserName Pattern Validation
if(!(usernameElement.value.match(/^[A-Za-z0-9_]{1,15}$/))){
displayErrorMessage(usernameElement,nameError,"Pattern didn't match");
result = false;
return result;
}
// Required Email Validation
if(emailElement.value === ''){
displayErrorMessage(emailElement,emailError,'Email is Required');
result = false;
return result;
}
// Required Password Validation
if(passwordElement.value === ''){
displayErrorMessage(passwordElement,passwordError,'Password Required');
result = false;
return result;
}
// Required Confirm Password Validation
if(confirmPasswordElement.value === ''){
displayErrorMessage(confirmPasswordElement,passwordError,'Confirm Password Required');
result = false;
return result;
}
// Password Match Validation
if(passwordElement.value !== confirmPasswordElement.value){
displayErrorMessage(confirmPasswordElement,passwordError,'Passwords did not Match');
passwordElement.style.backgroundColor = 'lightsalmon';
passwordElement.style.boxShadow = '0 0 15px red';
passwordElement.style.borderColor = 'red';
result = false;
return result;
}
if(result === false){
return result;
}
else{
alert('Form Submitted Successfully');
return true;
}
}
// Display Error Message Logic
function displayErrorMessage(inputElement,messageElement,message) {
inputElement.style.backgroundColor = 'lightsalmon';
inputElement.style.boxShadow = '0 0 15px red';
inputElement.style.borderColor = 'red';
messageElement.textContent = message;
messageElement.style.color = 'red';
}
// Clear Error Message Logic
function clearErrorMessage(inputElement,messageElement) {
inputElement.style.backgroundColor = 'white';
inputElement.style.boxShadow = '';
inputElement.style.borderColor = 'gray';
messageElement.textContent = '';
// Get HTML Elements
var usernameElement = document.querySelector('#username');
var emailElement = document.querySelector('#email');
var passwordElement = document.querySelector('#password');
var confirmPasswordElement = document.querySelector('#password_confirm');
// Get Error Msg Elements
var nameError = document.querySelector('#name_error');
var emailError = document.querySelector('#email_error');
var passwordError = document.querySelector('#password_error');
// Add Event Listeners for 'blur' event
usernameElement.addEventListener('blur',function() {
clearErrorMessage(usernameElement,nameError);
});
emailElement.addEventListener('blur',function() {
clearErrorMessage(emailElement,emailError);
});
passwordElement.addEventListener('blur',function() {
clearErrorMessage(passwordElement,passwordError);
clearErrorMessage(confirmPasswordElement,passwordError);
});
confirmPasswordElement.addEventListener('blur',function() {
clearErrorMessage(confirmPasswordElement,passwordError);
clearErrorMessage(passwordElement,passwordError);
});
function validate() {
var result = true;
// Required UserName validation
if(usernameElement.value === ''){
displayErrorMessage(usernameElement,nameError,'User Name is Required');
result = false;
return result;
}
// Username Length Validation
if(usernameElement.value.length < 5){
displayErrorMessage(usernameElement,nameError,'Add At least 5 letters');
result = false;
return result;
}
// Twitter UserName Pattern Validation
if(!(usernameElement.value.match(/^[A-Za-z0-9_]{1,15}$/))){
displayErrorMessage(usernameElement,nameError,"Pattern didn't match");
result = false;
return result;
}
// Required Email Validation
if(emailElement.value === ''){
displayErrorMessage(emailElement,emailError,'Email is Required');
result = false;
return result;
}
// Required Password Validation
if(passwordElement.value === ''){
displayErrorMessage(passwordElement,passwordError,'Password Required');
result = false;
return result;
}
// Required Confirm Password Validation
if(confirmPasswordElement.value === ''){
displayErrorMessage(confirmPasswordElement,passwordError,'Confirm Password Required');
result = false;
return result;
}
// Password Match Validation
if(passwordElement.value !== confirmPasswordElement.value){
displayErrorMessage(confirmPasswordElement,passwordError,'Passwords did not Match');
passwordElement.style.backgroundColor = 'lightsalmon';
passwordElement.style.boxShadow = '0 0 15px red';
passwordElement.style.borderColor = 'red';
result = false;
return result;
}
if(result === false){
return result;
}
else{
alert('Form Submitted Successfully');
return true;
}
}
// Display Error Message Logic
function displayErrorMessage(inputElement,messageElement,message) {
inputElement.style.backgroundColor = 'lightsalmon';
inputElement.style.boxShadow = '0 0 15px red';
inputElement.style.borderColor = 'red';
messageElement.textContent = message;
messageElement.style.color = 'red';
}
// Clear Error Message Logic
function clearErrorMessage(inputElement,messageElement) {
inputElement.style.backgroundColor = 'white';
inputElement.style.boxShadow = '';
inputElement.style.borderColor = 'gray';
messageElement.textContent = '';
}
0 ...iptBasic/19_Form_Validation/19_styles.css → ...tProject/19_Form_Validation/19_styles.css
View file
File renamed without changes.
1 change: 1 addition & 0 deletions JavaScript/JavaScriptProject/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

0 comments on commit 82e6fc6

Please sign in to comment.