JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page" id="page2">
    <div data-role="header">
        	<h1>Register jQuery</h1>

    </div>
    <div data-role="content">
        <!-- Name, Age -->
        <div data-role="fieldcontain">
            <label for="txtName">Name:</label>
            <input type="text" name="txtName" id="txtName" value="" />
        </div>
        <div data-role="fieldcontain">
            <label for="numAge">Age:</label>
            <input type="number" name="numAge" id="numAge" value="" />
        </div>
        <!-- Sex, Default value=M ale-->
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-type="horizontal">
                <legend>Sex</legend>
                <input type="radio" name="sex" id="sex_male" value="male" />
                <label for="sex_male">Male</label>
                <input type="radio" name="sex" id="sex_female" value="female" checked='checked' />
                <label for="sex_female">Female</label>
            </fieldset>
        </div>
        <!-- Emails -->
        <div data-role="fieldcontain">
            <label for="txtEmail">e-mail:</label>
            <input type="email" name="txtEmail" id="txtEmail" value="" />
        </div>
        <div data-role="fieldcontain">
            <label for="txtConfirmEmail">Confirm e-mail:</label>
            <input type="email" name="txtConfirmEmail" id="txtConfirmEmail" value="" />
        </div>
        <!-- Interest In checkboxes -->
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <legend>I am interested in the following</legend>
                <input type="checkbox" name="interest[]" value='Comet' id="interest_0" class="custom" value="" />
              ...

JavaScript

// JavaScript Document
$(document).ready(function () {

    //Submit the form for validation
    $('#submit').click(function () {
        var isValid = true;
       

        //Get the values from input fields:
        var $name = $('#txtName').val(),
        $age = $('#numAge').val(),
        //Sex:
         $sex = $("input[name='sex']:checked").val(),
        //Email:
        $email = $('#txtEmail').val(),
        $confirmEmail = $('#txtConfirmEmail').val(),
        //Fish varieties:
        $varieties = $('#txtVariety').val();

        //Put checkbox values into an Array
        var values = $('input[name="interest[]"]:checked').map(function () {
            return this.value;
        }).get();

        //Start Validation
        if ($name.length < 5) {
            $('p').remove('#after1');
            $('#txtName').focus();
            $('#txtName').val("");
            $('#txtName').after("<p id='after1' style='color:red;'><strong>Enter a name greater than 5 letters!</strong></p>");

            isValid = false;
        } else {
            $('p').remove('#after1');
            $name = $('#txtName').val();

        }
        if ($age.length > 105 || $age.length < 1) {
            $('p').remove('#after2');
            $('#numAge').focus();
            $('#numAge').val("");
            $('#numAge').after("<p id='after2' style='color:red;'><strong>Enter an Age less than 106 and greater than 0!</strong></p>");
            isValid = false;
        } else {
            $('p').remove('#after2');

        }


        if (!isValidEmailAddress($email)) {
            $('p').remove('#after3');

            $('#txtEmail').focus();
            $('#txtEmail').after("<p id='after3' style='color:red;'><strong>Enter a valid email - <span style='color:#0078ab;'>" + $email + "</span> - Is not valid</strong></p>");
            $('#txtEmail').val("");
            isValid = false;

        } else {
            $('p').remove('#after3');
            //Now check if the email is...