GeezerVison is showing github.com — JavaScriptFormValidation/script.js at main · jthinlay/JavaScriptFormValidation

Expand file tree

script.js

Copy path

More file actions

Latest commit

History

58 lines (54 loc) · 1.8 KB

script.js

Copy path

File metadata and controls

58 lines (54 loc) · 1.8 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

const form = document.getElementById('form');

const password1El = document.getElementById('password1');

const password2El = document.getElementById('password2');

const messageContainer = document.querySelector('.message-container');

const message = document.getElementById('message');

let isValid = false;

let isPasswordsMatch = false;

function validateForm(){

// Using Contraint API

isValid = form.checkValidity();

// Style our main message

if(isValid){

messageContainer.style.border = " 1px solid green";

message.textContent = "Successfully Registered!"

message.style.color = "green";

} else {

messageContainer.style.border = " 1px solid red";

message.textContent = "Did Not Registered Propertly!"

message.style.color = "red";

return;

}

// checking passwords

if(password1El.value === password2El.value){

isPasswordsMatch = true;

password1El.style.borderColor = "green";

password2El.style.borderColor = "green";

} else {

isPasswordsMatch = false;

password1El.style.borderColor = "red";

password2El.style.borderColor = "red";

message.textContent = "Passwords Do Not Match!!"

messageContainer.style.borderColor = "red";

message.style.color = "red";

return;

}

function storeFormData(){

const user = {

name: form.name.value,

phone: form.phone.value,

email: form.email.value,

website: form.website.value,

password: form.password.value,

}

console.log(user);

}

function processFormData(e){

e.preventDefault();

validateForm();

if(isValid && isPasswordsMatch){

storeFormData();

}

form.addEventListener('submit', processFormData);