javedbaloch4/js_validation.html

## js_validation.html
<html>
    <head>
        <title>Assignemnt</title>
        <style>
           .progress-bar {
                border-radius: 5px;
                padding: 5px;
                color: #FFF;
            }

            .bg-danger {
                background: red;
            }

            .bg-warning {
                background: orange;
            }

            .bg-success {
                background: green;
            }

        </style>
        <script>
            function validate() {

                let name = document.forms["register"]["name"];
                let password = document.forms["register"]["password"];
                let email = document.forms["register"]["email"];
                let gender = document.forms["register"]["gender"];
                let courses = document.forms["register"]["courses"];
                let semester = document.forms["register"]["semester"];

                // Name field validation
                if (name.value == "") {
                    window.alert("Please Enter your name");
                    name.focus();
                    return false;
                }

                if ( name.value.length > 25 ) {
                    alert("Name must be 25 chratecters.")
                    password.focus();
                    return false;
                }

                if (name.value.match(/^[a-zA-Z]+(([',. -][a-zA-Z ])?[a-zA-Z]*)*$/) == null ) {
                    alert("Only characters are allowed.")
                    name.focus();
                    return false;
                }

                // Password Validation
                if (password.value == "") {
                    window.alert("Password is required.");
                    password.focus();
                    return false;
                }

                if (! password.value.match(/^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).*$/)) {
                    window.alert("Password must contain at least one special or numeric");
                    password.focus();
                    return false;
                } else if (password.value.length < 12) {
                    window.alert("Password must be greater then 12 charecters.");
                    password.focus();
                    return false;
                }

                // Email Validation
                if (email.value == "") {
                    window.alert("Please Enter your email");
                    email.focus();
                    return false;
                }

                if (! email.value.match( /.+@(nu.edu)\.pk$/ )) {
                    window.alert("Only nu.edu.pk domains allowed in email.");
                    email.focus();
                    return false;
                }

                // Gender Validation
                if (! (gender[0].checked || gender[1].checked) ) {
                    window.alert("Please select gender");
                    return false;
                }

                // Courses Validation
                var checked = 0;
                for (var i = 0; i < courses.length; i++) {
                    if (courses[i].checked) {
                        checked++
                    }
                }

                if (checked < 3) {
                    alert("Select at least three coureses.");
                    return false;
                }

                if (checked > 3) {
                    alert("You can not select more then three courses.");
                    return false;
                }

                // Semester Validation
                if (semester.value == "") {
                    window.alert("Please Enter your semester");
                    return false;
                }

                alert("Submitted");


            }

            function isGood(password) {
                    var password_strength = document.getElementById("password-text");

                    //TextBox left blank.
                    if (password.length == 0) {
                        password_strength.innerHTML = "";
                        return;
                    }

                    //Regular Expressions.
                    var regex = new Array();
                    regex.push("[A-Z]"); //Uppercase Alphabet.
                    regex.push("[a-z]"); //Lowercase Alphabet.
                    regex.push("[0-9]"); //Digit.
                    regex.push("[$@$!%*#?&]"); //Special Character.

                    var passed = 0;

                    //Validate for each Regular Expression.
                    for (var i = 0; i < regex.length; i++) {
                        if (new RegExp(regex[i]).test(password)) {
                        passed++;
                        }
                    }

                    //Display status.
                    var strength = "";
                    switch (passed) {
                        case 0:
                        case 1:
                        case 2:
                        strength = "<small class='progress-bar bg-danger' style='width: 40%'>Weak</small>";
                        break;
                        case 3:
                        strength = "<small class='progress-bar bg-warning' style='width: 60%'>Medium</small>";
                        break;
                        case 4:
                        strength = "<small class='progress-bar bg-success' style='width: 100%'>Strong</small>";
                        break;

                    }
                    password_strength.innerHTML = strength;

                    }
        </script>
    </head>
    <body bgcolor="#EEE">

        <form name="register" action="next.php" method="post" onsubmit="event.preventDefault(); validate()">
            <fieldset>
                <legend>Registeration Form</legend>

                <table cellpadding="5" cellspacing="5">
                    <tr>
                        <td>
                            <label for="name">Name</label>
                        </td>
                        <td>
                            <input type="text" id="name">
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <label for="password">Password</label>
                        </td>
                        <td>
                            <input type="password" id="password" onkeyup="isGood(this.value)">
                            <small class="help-block" id="password-text"></small>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <label for="email">Email</label>
                        </td>
                        <td>
                            <input type="email" name="email" id="email">
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <label for="gender">Gender</label>
                        </td>
                        <td>
                            <input type="radio" name="gender" value="male"> Male
                            <input type="radio" name="gender" value="female"> Female
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <label for="courses">Courses offered</label>
                        </td>
                        <td>
                            <input type="checkbox" name="courses" value="english"> English
                            <input type="checkbox" name="courses" value="programming"> Programming
                            <input type="checkbox" name="courses" value="calculus"> Calculus
                            <input type="checkbox" name="courses" value="physics"> Physics
                            <input type="checkbox" name="courses" value="electronics"> Electronics
                            <input type="checkbox" name="courses" value="ict"> ICT
                            <input type="checkbox" name="courses" value="algebra"> Algebra
                            <input type="checkbox" name="courses" value="oop"> Object Oriented Programming
                            <input type="checkbox" name="courses" value="web"> Web Development
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <label for="semseter">Semester</label>
                        </td>
                        <td>
                            <select name="semester" id="semester">
                                <option value="">-- Please Select -- </option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                            </select>
                        </td>
                    </tr>

                    <tr>
                        <td colspan="2">
                            <hr>
                            <button type="submit">Register</button>
                            <button type="reset">Reset</button>
                        </td>
                    </tr>

                </table>
            </fieldset>
        </form>
    </body>
</html>
	<html>
	<head>
	<title>Assignemnt</title>
	<style>
	.progress-bar {
	border-radius: 5px;
	padding: 5px;
	color: #FFF;
	}

	.bg-danger {
	background: red;
	}

	.bg-warning {
	background: orange;
	}

	.bg-success {
	background: green;
	}

	</style>
	<script>
	function validate() {

	let name = document.forms["register"]["name"];
	let password = document.forms["register"]["password"];
	let email = document.forms["register"]["email"];
	let gender = document.forms["register"]["gender"];
	let courses = document.forms["register"]["courses"];
	let semester = document.forms["register"]["semester"];

	// Name field validation
	if (name.value == "") {
	window.alert("Please Enter your name");
	name.focus();
	return false;
	}

	if ( name.value.length > 25 ) {
	alert("Name must be 25 chratecters.")
	password.focus();
	return false;
	}

	if (name.value.match(/^[a-zA-Z]+(([',. -][a-zA-Z ])?[a-zA-Z])$/) == null ) {
	alert("Only characters are allowed.")
	name.focus();
	return false;
	}

	// Password Validation
	if (password.value == "") {
	window.alert("Password is required.");
	password.focus();
	return false;
	}

	if (! password.value.match(/^(?=.[A-Z])(?=.[a-z])(?=.[0-9]).$/)) {
	window.alert("Password must contain at least one special or numeric");
	password.focus();
	return false;
	} else if (password.value.length < 12) {
	window.alert("Password must be greater then 12 charecters.");
	password.focus();
	return false;
	}

	// Email Validation
	if (email.value == "") {
	window.alert("Please Enter your email");
	email.focus();
	return false;
	}

	if (! email.value.match( /.+@(nu.edu)\.pk$/ )) {
	window.alert("Only nu.edu.pk domains allowed in email.");
	email.focus();
	return false;
	}

	// Gender Validation
	if (! (gender[0].checked \|\| gender[1].checked) ) {
	window.alert("Please select gender");
	return false;
	}

	// Courses Validation
	var checked = 0;
	for (var i = 0; i < courses.length; i++) {
	if (courses[i].checked) {
	checked++
	}
	}

	if (checked < 3) {
	alert("Select at least three coureses.");
	return false;
	}

	if (checked > 3) {
	alert("You can not select more then three courses.");
	return false;
	}

	// Semester Validation
	if (semester.value == "") {
	window.alert("Please Enter your semester");
	return false;
	}

	alert("Submitted");


	}

	function isGood(password) {
	var password_strength = document.getElementById("password-text");

	//TextBox left blank.
	if (password.length == 0) {
	password_strength.innerHTML = "";
	return;
	}

	//Regular Expressions.
	var regex = new Array();
	regex.push("[A-Z]"); //Uppercase Alphabet.
	regex.push("[a-z]"); //Lowercase Alphabet.
	regex.push("[0-9]"); //Digit.
	regex.push("[$@$!%*#?&]"); //Special Character.

	var passed = 0;

	//Validate for each Regular Expression.
	for (var i = 0; i < regex.length; i++) {
	if (new RegExp(regex[i]).test(password)) {
	passed++;
	}
	}

	//Display status.
	var strength = "";
	switch (passed) {
	case 0:
	case 1:
	case 2:
	strength = "<small class='progress-bar bg-danger' style='width: 40%'>Weak</small>";
	break;
	case 3:
	strength = "<small class='progress-bar bg-warning' style='width: 60%'>Medium</small>";
	break;
	case 4:
	strength = "<small class='progress-bar bg-success' style='width: 100%'>Strong</small>";
	break;

	}
	password_strength.innerHTML = strength;

	}
	</script>
	</head>
	<body bgcolor="#EEE">

	<form name="register" action="next.php" method="post" onsubmit="event.preventDefault(); validate()">
	<fieldset>
	<legend>Registeration Form</legend>

	<table cellpadding="5" cellspacing="5">
	<tr>
	<td>
	<label for="name">Name</label>
	</td>
	<td>
	<input type="text" id="name">
	</td>
	</tr>

	<tr>
	<td>
	<label for="password">Password</label>
	</td>
	<td>
	<input type="password" id="password" onkeyup="isGood(this.value)">
	<small class="help-block" id="password-text"></small>
	</td>
	</tr>

	<tr>
	<td>
	<label for="email">Email</label>
	</td>
	<td>
	<input type="email" name="email" id="email">
	</td>
	</tr>

	<tr>
	<td>
	<label for="gender">Gender</label>
	</td>
	<td>
	<input type="radio" name="gender" value="male"> Male
	<input type="radio" name="gender" value="female"> Female
	</td>
	</tr>

	<tr>
	<td>
	<label for="courses">Courses offered</label>
	</td>
	<td>
	<input type="checkbox" name="courses" value="english"> English
	<input type="checkbox" name="courses" value="programming"> Programming
	<input type="checkbox" name="courses" value="calculus"> Calculus
	<input type="checkbox" name="courses" value="physics"> Physics
	<input type="checkbox" name="courses" value="electronics"> Electronics
	<input type="checkbox" name="courses" value="ict"> ICT
	<input type="checkbox" name="courses" value="algebra"> Algebra
	<input type="checkbox" name="courses" value="oop"> Object Oriented Programming
	<input type="checkbox" name="courses" value="web"> Web Development
	</td>
	</tr>

	<tr>
	<td>
	<label for="semseter">Semester</label>
	</td>
	<td>
	<select name="semester" id="semester">
	<option value="">-- Please Select -- </option>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	</select>
	</td>
	</tr>

	<tr>
	<td colspan="2">
	<hr>
	<button type="submit">Register</button>
	<button type="reset">Reset</button>
	</td>
	</tr>

	</table>
	</fieldset>
	</form>
	</body>
	</html>