Real time form with js

Question

How to create validation form using real time javascript with terms
1. at least 6 characters or more
2. containing letters and numbers.

if it is met appears checklist, if not red writing.
https://code.sololearn.com/W0txNcG2chD0/?ref=app
https://code.sololearn.com/W0txNcG2chD0/?ref=app

Answer 1

html:
<input type="password" name="password" pattern="[\w\d]{6}" required>

css:
input[type="password"]:invalid {
color:red;
}
input[type="password"]:invalid + button {
display:none;
}

... be carreful about the '+' css selector operator: it will target the adjacent sibling element only, so it will only work with your actual example, where <button> follow immediatly the password <input> ^^

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-pattern
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

Answer 2

I was not seing 'or more' after '6 characters'...
Change pattern value to:

<input type="password" name="password" pattern="[\w\d]{5}[\w\d]+" required>

... but check link about pattern attribute, and learn about regular expression to be able to understand it ^^

Answer 3

Hi Rian

Try this site

http://html5pattern.com/Passwords

Answer 4

https://code.sololearn.com/W0txNcG2chD0/?ref=app

sorry, I use code.
don't work.

Answer 5

if you have Referensi code real time password with javascript, share this. please