Here is the source Code : Form Validator @import url('fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&family=Rubik:wght@300;400;600;700&display=swap'); :root { --success-color: #2ecc71; --error-color: #e74c3c; } * { box-sizing: border-box; } body { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./img/bg.jpg'); background-size: cover; background-position: center top; font-family: 'Rubik', sans-serif; display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; } .container { background-color: rgba(0, 0, 0, 0.5); border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); width: 400px; } h2 { font-weight: 300; text-align: center; margin: 0 0 20px; color: white; } .form { padding: 30px 40px; } .form-control { margin-bottom: 10px; padding-bottom: 20px; position: relative; } .form-control label { color: #fff; display: block; margin-bottom: 5px; font-weight: 300; } .form-control input { background: transparent; border: 0; border-bottom: 1px solid #f0f0f0; display: block; width: 100%; padding: 10px 0; font-size: 14px; color: white; font-family: 'Roboto', sans-serif; } .form-control input#username { background-color: transparent; } .form-control input:focus { outline: 0; border-color: #777; } .form-control.success input { border-color: var(--success-color); } .form-control.error input { border-color: var(--error-color); } .form-control small { color: var(--error-color); position: absolute; bottom: 0; left: 0; visibility: hidden; } .form-control.error small { visibility: visible; } .form button { cursor: pointer; background-color: crimson; border: 2px solid crimson; border-radius: 4px; color: #fff; display: block; font-size: 16px; padding: 10px; margin-top: 20px; width: 100%; } Register Name Email Password Submit const name = document.getElementById('name'); const email = document.getElementById('email'); const password = document.getElementById('password'); const form = document.getElementById('form'); const name_error = document.getElementById('name_error'); const email_error = document.getElementById('email_error'); const pass_error = document.getElementById('pass_error'); form.addEventListener('submit',(e)=> { var email_check = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; if(name.value === '' || name.value == null) { e.preventDefault(); name_error.innerHTML = "Name is required"; } else { name_error.innerHTML = ""; } if(!email.value.match(email_check)) { e.preventDefault(); email_error.innerHTML = "Valid Email is required"; } else { email_error.innerHTML = ""; } if(password.value.length = 20) { e.preventDefault(); pass_error.innerHTML = "Password cannot be more than 20 characters"; } if(password.value === 'password') { e.preventDefault(); pass_error.innerHTML = "Password cannot be password"; } })

This very helpful,, thank you very much sir

Very nice validation form bro.. thanks❤❤👏👏👏

today is my exam,THANK U SO MUCH!!!

Fet array from controller and then Show cart with JavaScript without refresh...page web please. Thanks for this video

Please do more project series on Laravel.

Make addtocart local base in JavaScript