Validation fun

Developer
Dave
Size
3,893 Kb
Views
14,168
  1. Validation fun Previews
  2. Validation fun HTML Codes
  3. Validation fun CSS Codes
  4. Validation fun JS Codes

How do I make an validation fun?

What is a validation fun? How do you make a validation fun? This script and codes were developed by Dave on 04 October 2022, Tuesday.

Validation fun Previews
IQ Test

Validation fun - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Validation fun</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<form id="login_form" class="js-validate js-cappers" novalidate> <label for="name">Name</label> <input id="name" type="text" name="name" class="js-validate-input" required> <p class="ai-form-error-message">You need a name</p> <label for="email">Email</label> <input id="email" type="email" name="email" class="js-validate-input"> <p class="ai-form-error-message">Email not gonna fly dawg</p> <label for="password">Password</label> <input id="password" type="password" name="password" class="js-validate-input"> <p class="ai-form-error-message">Password yo</p> <button type="submit">Login</button>
</form> <script src="js/index.js"></script>
</body>
</html>

Validation fun - Script Codes CSS Codes

button:not(:disabled) { background-color: orange;
}
.is-invalid { border: 1px solid red;
}
.ai-form-error-message { color: red; display: none;
}
.is-invalid + .ai-form-error-message { display: block;
}

Validation fun - Script Codes JS Codes

'use strict';
// const isCapsLockPressed = e => {
// const kc = e.keyCode;
// const sk = e.shiftKey;
// if(((kc >= 65 && kc <= 90) && !sk) || ((kc >= 97 && kc <= 122) && sk)) {
// // console.log('caps innit');
// } else {
// // console.log('caps nah');
// }
// };
// const blah = document.getElementsByClassName('js-cappers');
// if (blah.length) {
// document.addEventListener('keypress', isCapsLockPressed);
// }
var isFormValid = function isFormValid(form) { return form.querySelectorAll('.js-validate-input').length === form.querySelectorAll('.is-valid').length;
};
var isEmailValid = function isEmailValid(value) { return (/.+\@.+\..+/.test(value) );
};
var isPasswordValid = function isPasswordValid(value) { return value.length >= 8;
};
var isRequired = function isRequired(value) { return value.length > 0;
};
var validationMap = { email: function email(val) { return isEmailValid(val); }, password: function password(val) { return isPasswordValid(val); }, required: function required(val) { return isRequired(val); }
};
var validateField = function validateField(e) { var el = e.target; if ((validationMap[el.type] || el.required) && el.classList.contains('js-validate-input')) { var mapKey = validationMap[el.type] ? el.type : 'required'; var form = el.closest('.js-validate'); var isValid = validationMap[mapKey](el.value); if (isValid) { el.classList.add('is-valid'); el.classList.remove('is-invalid'); } else { el.classList.remove('is-valid'); if (e.type === 'blur') { el.classList.add('is-invalid'); el.classList.add('is-dirty'); } } form.querySelector('[type="submit"]').disabled = !isFormValid(form); }
};
var setForm = function setForm(form) { var fields = { email: form.querySelectorAll('.js-validate-input[type="email"]'), password: form.querySelectorAll('.js-validate-input[type="password"]'), required: form.querySelectorAll('.js-validate-input[required]') }; for (var key in fields) { if (fields.hasOwnProperty(key)) { for (var i = 0; i < fields[key].length; i++) { if (validationMap[key](fields[key][i].value)) { fields[key][i].classList.add('is-valid'); } } } } if (fields.password.length || fields.email.length || fields.required.length) { document.addEventListener('keyup', validateField); document.addEventListener('blur', validateField, true); form.querySelector('[type="submit"]').disabled = !isFormValid(form); }
};
var validate = function validate() { var forms = document.getElementsByClassName('js-validate'); for (var i = 0; i < forms.length; i++) { setForm(forms[i]); }
};
validate();
Validation fun - Script Codes
Validation fun - Script Codes
Home Page Home
Developer Dave
Username DaveOrDead
Uploaded October 04, 2022
Rating 3
Size 3,893 Kb
Views 14,168
Do you need developer help for Validation fun?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dave (DaveOrDead) Script Codes
Name
A Pen by Dave
Scrollable tables
Blank slates
Flexbox grid mark 2
Words at War
Shell CSS lib
React Calculator
Table drag
Colour Swatches
Webpack config
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!