Client side input validation via Bootstrap and jQuery

user_14860984 0
Viewed 117

I am kind of stuck, with this I don't even know where to start but I need to mark the first input as green on the correct password, red if the password does not meet the requirements

Requirements:

Passwords must be at least 10 characters long and have lowercase and uppercase letters

Passwords less than 15 characters must have a number and a special character

Marking the second input outline as green if it matches the first input and the password is correct, red otherwise. Any help would be very appriciated

        <div class="form-group">
            <label for="newPasswordTextBox">Password</label>
            <input type="password" id="newPasswordTextBox" class="form-control" name="newPassword" 
             placeholder="New Password" autocomplete="off">
        </div>
        <div class="form-group">
            <label for="confirmNewPasswordTextBox">Confirm Password</label>
            <input type="password" id="confirmNewPasswordTextBox" class="form-control" 
             name="confirmNewPassword" placeholder="Confirm New Password" autocomplete="off">
        </div>
        <div class="small">
            <ul>
                <li>Passwords must be at least 10 characters long and have a lowercase and 
                 uppercase letters</li>
                <li>Passwords less than 15 characters must have a number and a special 
                character</li>
            </ul>
        </div>
validation css html jquery javascript
1 Answers

You could try using javascript to collect both inputs document.getElementById("newPasswordTextBox") and document.getElementById("confirmNewPasswordTextBox") and then you can take the .value attributes from the input boxes to check the input against if conditionals with your specified requirements. eg.

let newPass=document.getElementById("newPasswordTextBox");
newPass.addEventListener("keyup",function(evt){
  let val=newPass.value;
  //check requirements here
});

or in jquery

$("#newPasswordTextBox").on("keyup", function(evt){
  let val=$("#newPasswordTextBox").val(); //get the value using jquery
//check requirements here
});

Next, use if conditionals by //check requirements here to get your functionality. You can use val.length to get the length of the string obtained from the textbox, then just compare this to the size you want(10). Repeat the aforementioned for 15 but just add the extra requirements of checking for numbers and special characters(see regular expressions in javascript). For validating that passwords match just grab both values and use "===" to determine if they are equal. You can also change the input boxes' outline colours using the border property as follows:

$("#newPasswordTextBox").css({"border-color":"green"});//Use the appropriate id and colour for the box you wish to change

Addition(correcting the authors code post): I've managed to capture most of what I believe you'd want here and corrected some of your code by changing the wrong variables that were called and changed to the proper regex code.

$("#newPasswordTextBox").on("keyup", function () {
        let pass = $("#newPasswordTextBox").val();
        if ((pass.length >=10) && (pass.length < 15)) {
            var regex = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~])/;
    if(!pass.match(regex)){
     $("#newPasswordTextBox").css({ "border-color": "red"});
        }
    else{
      $("#newPasswordTextBox").css({ "border-color": "green" });
    }
        } else if (pass.length>=15){       
            $("#newPasswordTextBox").css({ "border-color": "green","outline":"none" });
        }else {
            $("#newPasswordTextBox").css({ "border-color": "red","outline":"none" });
        }
        }
    );

    $("#confirmNewPasswordTextBox").on("keyup", function () {
        let pass = $("#confirmNewPasswordTextBox").val();
        let confpass = $("#newPasswordTextBox").val();

        if (pass === confpass) {
            $("#confirmNewPasswordTextBox").css({ "border-color": "green","outline":"none" })
        } else {
            $("#confirmNewPasswordTextBox").css({ "border-color": "red","outline":"none" });

        }
    })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<body>
  <input type="text" id="newPasswordTextBox" placeholder="new">
  <input type="text" id="confirmNewPasswordTextBox" placeholder="re-enter">
</body>

user_166537000
Related