JSFiddle - React, Tailwind, and code Playground

by antishok

HTML

<body>
    	<h2><u>jQuery: Advanced Techniques - Practical</u></h2>

    	<h3>Task 3</h3>

    <br>
    <div id="overlay1" class="overlay">
        	<h2>Fill out this form!</h2>

        <form name="my_form" id="my_form" action="" method="post">
            <div class="my-row">
                <fieldset>
                    <legend><b>Form of address:</b>

                    </legend>
                    <input type="radio" name="form_of_address" id="group1" value="Mr">
                    <label for="group1" class="label-right">Mr</label>
                    <input type="radio" name="form_of_address" id="group2" value="Ms">
                    <label for="group2" class="label-right">Ms</label>
                </fieldset>
            </div>
            <div class="my-row">
                <fieldset>
                    <legend><b>Sex:</b>

                    </legend>
                    <input type="radio" name="sex" id="group1" value="Male">
                    <label for="group1" class="label-right">Male</label>
                    <input type="radio" name="sex" id="group2" value="Female">
                    <label for="group2" class="label-right">Female</label>
                </fieldset>
            </div>
            <div class="my-row">
                <label for="last_name" class="label-left"><b>Last Name: </b>

                </label>
                <input type="text" name="last_name" id="last_name">
            </div>
            <div class="my-row">
                <label for="first_name" class="label-left"><b>First Name: </b>

                </label>
                <input type="text" name="first_name" id="first_name">
            </div>
            <div class="my-row">
                <label for="email" class="label-left"><b>E-Mail: </b>

                </label>
                <input type="text" name="email" id="email">
            </div>
            <div class="my-row">
                <label for="password" class="label-left"><b>Password:...

CSS

body {
	    width: 500px;
	}
	.my-row {
	    width: 100%;
	    padding: 5px;
	    border-bottom: 1px solid #000;
	}
	label {
	    margin-right: 5px;
	}
	.label-left {
	    text-align: right;
	}
	.label-right {
	    text-align: left;
	}
	.error {
	    color: #cc0000;
	}
	/* The Overlay: */
	.overlay {
	    /* General properties: */
	    /* - Hidden when the page is first displayed */
	    display: none;
	    /* - Displayed on top of the other page elements */
	    z-index: 10000;
	    top: 0.5px;
	    /* Appearance: */
	    background-color: #F778A1;
	    padding: 0.5px;
	    border: 1px solid #000000;
	}
	/* The Close Button: */
	.overlay-close {
	    /* Button image: */
	    background-image: url(close.png);
	    background-repeat:no-repeat;
	    /* Location: */
	    position: absolute;
	    right: -5px;
	    top: 2px;
	    /* Mouse cursor: */
	    cursor: pointer;
	    /* Size: */
	    height: 35px;
	    width: 35px;
	}

JavaScript

$(document).ready(function() {
    
    function myValidateEMailAddress(email_address) {
      var email_pattern = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
      return email_pattern.test(email_address);
    }
    
    function checkPassword(password) {
	var my_pwd_pattern = /^(?=.*[a-zA-Z].*[a-zA-Z])(?=.*\d.*\d)[a-zA-Z0-9_]{6,20}$/;
	return my_pwd_pattern.test(password);
	}
	
    $(document).ready(function() {    
      $('#my_form').submit(function(e) {
        
        var my_errors = false;
        $('.my-row > .error').remove();
        $('#my_submission').empty();
        $(':text, textarea').each(function() {
          $(this).val($.trim($(this).val()));
          if ($(this).val() == '') {
            $(this).parent().append('<div class="error">Please provide a value</div>');
            my_errors = true;
          }
        });
        if ($('#email').val() != '') {
          if (!myValidateEMailAddress($('#email').val())) {
            $('#email').parent().append('<div class="error">Please type in a correct e-mail address</div>');
            my_errors = true;
          }
        }

		if ($('#password').val() != '') {
          if (!checkPassword($('#password').val())) {
            $('#password').parent().append('<div class="error">Please type in a correct password</div>');
            my_errors = true;
          }
        }
        if ($(':radio[name="form_of_address"]:checked').length == 0) {
          $(':radio[name="form_of_address"]:first').parent().after('<div class="error">Please select one item</div>');
          my_errors = true;
        }
        if ($(':radio[name="sex"]:checked').length == 0) {
          $(':radio[name="sex"]:first').parent().after('<div class="error">Please select one item</div>');
          my_errors = true;
        }
        if ($('.interests:checked').length == 0) {
          $('.interests:first').parent().after('<div class="error">Please select at least one item</div>');
          my_errors = true;
        }
        if...