How to check Password strength in jQuery with Demo

How to check Password strength in jQuery with Demo

How to check Password strength in jQuery with Demo
Form validation using jQuery

Form validation is a process of confirming the relevant information entered by the user in the input field. Here we will be validating a simple form that consists of a username, password and a confirm password using jQuery.

We’re going to use the jQuery Validation Plugin to validate our form. The basic principle of this plugin is to specify validation rules and error messages for HTML elements in JavaScript.

Prerequisites: You must be aware of the basics of HTML, CSS, JavaScript, and jQuery.

Approach:

First of all, you need to create an index.html file that consists of Bootstrap 4 form with username, email, password, and confirm password as input fields. At the bottom of the “body” tag, include the “app.js” file having jQuery code for form validation.

Create an app.js file that validates the whole form as given below in the code.

In the app.js file, when the document is ready, hide all the error messages. Perform the validation task for all the input fields such as username, email, password, and confirm password.

index.html: The following HTML code demonstrates the form design for user input.

HTML:-

<!– Latest compiled and minified CSS –>

< link rel=”stylesheet” hr ef=”maxcdn. bootstrapcdn. com/bootstrap/4.0.0/css/bootstrap .min.css”>

<!– jQuery library –>

src=”ajax. googleapis. com/ajax/libs/jquery/3.3.1/jquery.min.js”

<!– Popper JS –>

<br>

<h1 class=”text-center text-success”>

Welcome to vkprogramming

</h1>

<p class=”text-center”>

FORM VALIDATION USING JQUERY

</p>

<div class=”container”>

<div class=”col-lg-8

m-auto d-block”>

<form>

<div class=”form-group”>

<label for =”user”>

Username:

</label>

<input type=”text”

name=”username” id=”usernames”

class=”form-control”>

<h5 id=”usercheck” style=”color: red;” >

**Username is missing

</h5>

</div>

<div class=”form-group”>

<label for=”user”>

Email:

</label>

<input type=”email” name=”email” id=”email” required class=”form-control”>

<small id=”emailvalid” class=”form-text

text-muted invalid-feedback”>

Your email must be a valid email

</small>

</div>

<div class=”form-group”>

<label for=”password”>

Password:

</label>

<input type=”password” name=”pass”

id=”password” class=”form-control”>

<h5 id=”passcheck” style=”color: red;”>

**Please Fill the password

</h5>

</div>

<div class=”form-group”>

<label for=”conpassword”>

Confirm Password:

</label>

<input type=”password” name=”username”

id=”conpassword” class=”form-control”>

<h5 id=”conpasscheck” style=”color: red;”>

**Password didn’t match

</h5>

</div>

<input type=”submit” id=”submitbtn”

value=”Submit” class=”btn btn-primary”>

</form>

</div>

app.js: The following jQuery code for validation is used in the above HTML file.

Javascript:-

// Document is ready

$(document).ready(function () {

// Validate Username

$(‘#usercheck’).hide();

let usernameError = true;

$(‘#usernames’).keyup(function () {

validateUsername();

});

function validateUsername() {

let usernameValue = $(‘#usernames’).val();

if (usernameValue.length == ”) {

$(‘#usercheck’).show();

usernameError = false;

return false;

}

else if((usernameValue.length < 3)||

(usernameValue.length > 10)) {

$(‘#usercheck’).show();

$(‘#usercheck’).html

(“**length of username must be between 3 and 10”);

usernameError = false;

return false;

} else {

$(‘#usercheck’).hide(); } }

// Validate Email

const email =

document.getElementById(’email’);

email.addEventListener(‘blur’, ()=>{

let regex =

/^([_-.0-9a-zA-Z]+)@([_-.0-9a-zA-Z]+).([a-zA-Z]){2,7}$/;

let s = email.value;

if(regex.test(s)){

email.classList.remove(

‘is-invalid’);

emailError = true;

} else{

email.classList.add(

‘is-invalid’);

emailError = false;

} })

// Validate Password

$(‘#passcheck’).hide();

let passwordError = true;

$(‘#password’).keyup(function () {

validatePassword();

});

function validatePassword() {

let passwrdValue =

$(‘#password’).val();

if (passwrdValue.length == ”) {

$(‘#passcheck’).show();

passwordError = false;

return false;

}

if ((passwrdValue.length < 3)||

(passwrdValue.length > 10)) {

$(‘#passcheck’).show();

$(‘#passcheck’).html

(“**length of your password must be between 3 and 10”);

$(‘#passcheck’).css(“color”, “red”);

passwordError = false;

return false;

} else {

$(‘#passcheck’).hide();

}

// Validate Confirm Password

$(‘#conpasscheck’).hide();

let confirmPasswordError = true;

$(‘#conpassword’).keyup(function () {

validateConfirmPasswrd();

});

function validateConfirmPasswrd() {

let confirmPasswordValue =

$(‘#conpassword’).val();

let passwrdValue =

$(‘#password’).val();

if (passwrdValue != confirmPasswordValue) {

$(‘#conpasscheck’).show();

$(‘#conpasscheck’).html(

“**Password didn’t Match”);

$(‘#conpasscheck’).css(

“color”, “red”);

confirmPasswordError = false;

return false;

} else {

$(‘#conpasscheck’).hide();

} }

// Submitt button

$(‘#submitbtn’).click(function () {

validateUsername();

validatePassword();

validateConfirmPasswrd();

validateEmail();

if ((usernameError == true) &&

(passwordError == true) &&

(confirmPasswordError == true) &&

(emailError == true)) {

return true;

} else {

return false;

} }); });

Output: Below is the output generated when the user directly hits the submit button.

HTML is the foundation of web pages, is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

CSS is the foundation of web pages, is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.

jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous for its philosophy of “Write less, do more”.

You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.

How to check Password strength in jQuery with Demo

Style code

#frmCheckPassword {

border-top: #F0F0F0 2px solid;

background: #808080;

padding: 10px;

}

.demoInputBox {

padding: 7px;

border: #F0F0F0 1px solid;

border-radius: 4px;

}

#password-strength-status {

padding: 5px 10px;

color: #FFFFFF;

border-radius: 4px;

margin-top: 5px;

}

.medium-password {

background-color: #b7d60a;

border: #BBB418 1px solid;

}

.weak-password {

background-color: #ce1d14;

border: #AA4502 1px solid;

}

.strong-password {

background-color: #12CC1A;

border: #0FA015 1px solid;

}

<label>Password:</label>

</div>

Script code

function checkPasswordStrength() {

var number = /([0-9])/;

var alphabets = /([a-zA-Z])/;

var special_characters = /([~,!,@,#,$,%,^,&,*,-,_,+,=,?,>,<])/;

if ($(‘#password’).val().length < 6) {

$(‘#password-strength-status’).removeClass();

$(‘#password-strength-status’).addClass(‘weak-password’);

$(‘#password-strength-status’).html(“Weak (should be atleast 6 characters.)”);

} else {

if ($(‘#password’).val().match(number) && $(‘#password’).val().match(alphabets) && $(‘#password’).val().match(special_characters)) {

$(‘#password-strength-status’).removeClass();

$(‘#password-strength-status’).addClass(‘strong-password’);

$(‘#password-strength-status’).html(“Strong”);

} else {

$(‘#password-strength-status’).removeClass();

$(‘#password-strength-status’).addClass(‘medium-password’);

$(‘#password-strength-status’).html(“Medium (should include alphabets, numbers and special characters.)”);

} } }

Demo

We’re going to use the jQuery Validation Plugin to validate our form. The basic principle of this plugin is to specify validation rules and error messages for HTML elements in JavaScript.

People also ask

JQuery Validation with jQuery tutorial, methods, HTML and CSS, properties, examples of jQuery effects, selectors, traversing, events, manipulation, animation, HTML and more.

People also ask

What is jQuery form validation?

How do you check whether a form is valid or not in jQuery?

What is form validation in JavaScript?

What is jQuery illustrate the use of jQuery for form validation?

RELATED TUTORIALS