onlyforbopi
9/26/2018 - 4:24 PM
HTML.CSS.JS.FetchingDataServerSide.Password validation
HTML.CSS.JS.FetchingDataServerSide.Password validation
.myForm input:invalid {
background-color: lightPink;
}
.myForm input:valid {
background-color:lightGreen;
}
.myForm input:required {
border: 2px solid red;
}
.myForm input:optional {
border: 2px solid green;
}
.myForm label {
display: inline-block;
width: 140px;
text-align: right;
} function checkPasswords() {
var password1 = document.querySelector('#password1');
var password2 = document.querySelector('#password2');
// Use HTML5 form validation API
if (password1.value !== password2.value) {
// password2 input field is invalid
password2.setCustomValidity('Passwords are different');
} else {
// call to setCustomValidity with an empty arguments
// indicates that the input field is valid
password2.setCustomValidity('');
}
}
function submitForm() {
document.body.append("We can submit, the form is valid!");
// Here, for example, we can do what we want with the data
// Send to a server using Ajax,
// show the data in a table,
// save data client-side, etc.
// returning false will not submit the form
return false;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of using the validation API</title>
<meta charset="utf-8">
</head>
<body>
<form class="myForm" onsubmit="return submitForm();">
<fieldset>
<legend>Example use of the validation API: try to submit with different passwords, and with same passwords</legend>
<label for="password1" >Password:</label> <input type="password" id="password1" oninput="checkPasswords()" required>
<p>
<label for="password2">Repeat password:</label> <input type="password" id="password2" oninput="checkPasswords()" required>
<p>
<button>Submit</button>
</fieldset>
</form>
</body>
</html>