HTML form validation using javascript| form validation by javascript

durjoy 10:25 AM 0

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Password validation</title>
<style type="text/css">
    .container {
background-color: #f1f1f1;
padding: 20px;
width: 50%;
}
input {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
}
#message{
    display: none;
}
#message p{
    font-size: 18px;
    padding-left: 35px;
}
.invalid{
    color: red;
}

.invalid:before{
    position: relative;
    left:-20px;
    content:"✖";
}
.valid{
color: green;

}
.valid:before{
    position: relative;
    left:-20px;
    content: "✓";
}
</style>
</head>
<body>
<h2>Password Validation</h2><hr>
<div class="container">

    <form action="#">

        <input type="text" name="user_name" placeholder="Please enter your user name" required="">
        <input type="text" name="pwd" id="pwd" title="Please enter password at list 8 character and Capital letter and small letter" pattern="(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,}" required="">
        <input type="submit" value="Submit">
    </form>

</div>

<div id="message">
<h3>Password must contain the following:</h3>
<p id="letter" class="invalid">A <b>lowercase</b> letter</p>
<p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
<p id="number" class="invalid">A <b>number</b></p>
<p id="length" class="invalid">Minimum <b>8 characters</b></p>
</div>

<script type="text/javascript">
    var myInput=document.getElementById('pwd');
    var letter = document.getElementById("letter");
    var capital = document.getElementById("capital");
    var number = document.getElementById("number");
    var length = document.getElementById("length");
    myInput.onfocus= function(){
        document.getElementById('message').style.display="block";
    }
     myInput.onblur= function(){
        document.getElementById('message').style.display="none";
    }
    myInput.onkeyup= function(){
        var lowercaseletters= /[a-z]/g;
        if(myInput.value.match(lowercaseletters)){
            letter.classList.remove('invalid');
            letter.classList.add('valid');
        }
        else{
            letter.classList.remove('valid');
            letter.classList.add('invalid');
        }

        var capitalcaseletters= /[A-Z]/g;
        if(myInput.value.match(capitalcaseletters)){
            capital.classList.remove('invalid');
            capital.classList.add('valid');
        }
        else{
            capital.classList.remove('valid');
            capital.classList.add('invalid');
        }
        var numbers= /[0-9]/g;
        if(myInput.value.match(numbers)){
            number.classList.remove('invalid');
            number.classList.add('valid');
        }
        else{
            number.classList.remove('valid');
            number.classList.add('invalid');
        }
        if(myInput.value.length >=8){
            length.classList.remove('invalid');
            length.classList.add('valid');
        }
        else{
            length.classList.remove('valid');
            length.classList.add('invalid');
        }
    }
</script>

</body>
</html>

For To-Let visit: www.basabaribd.com www.basabaribd.com

No comments

Subscribe to: Post Comments ( Atom )