Javascript Callback Functions Project to Validate HTML5 Form Fields in Browser With Custom Error Messages Full Project For Beginners

 

 

index.html

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript Callback functions project</title>
</head>
<body>
    <h1>Javascript Callback functions form validation</h1>
    <input type="text" id="name" placeholder="Enter your name">
    <input type="password" id="password" placeholder="Enter your password">
    <button id="button">Submit Form</button>
</body>
<script>
    let button = document.getElementById('button')

let name,password,message

button.addEventListener('click',(e) => {
  
    name = document.getElementById('name').value

    password = document.getElementById('password').value

    let message = (alertmessage) => {
        alert(alertmessage)
    }

    validateform(name,password,message)


})

let validateform = (name,password,callback) => {
    if(name == "" || password == ""){
        callback("Please enter all the fields")
    }else if(name.length < 4){
        callback("Name should be atleast 4 characters")
    }else if(password.length < 6){
        callback("Password should be atleast 6 characters")
    }else{
        callback("Form is validated")
    }
}
</script>
</html>

Leave a Reply