Skip to content

Instantly share code, notes, and snippets.

@patrickpackham

patrickpackham/index.html

Created September 13, 2016 13:30
Download ZIP

Revisions

  1. patrickpackham created this gist Sep 13, 2016.
    23 changes: 23 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    <html>
    <head>
    <title>Assignment 2</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="validate.js"></script>
    </head>

    <body>
    <div id="content">
    <h1>Register</h1>
    <form name ="register" action="" onsubmit="return validateInput()" method="post" >
    <label>Name:</label>
    <input type="text" name="name" />
    <label>E-mail:</label>
    <input type="email" name="email" />
    <label>Date of Birth:</label>
    <input type="date" name="dob" />
    <input type="submit" name="submit" />
    </form>
    </div>
    </body>
    </html>
    74 changes: 74 additions & 0 deletions validate.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,74 @@
    var name = "";
    var email = "";
    var dob = "";

    function validateInput() {
    //retrieve all the form elements
    var validate = document.forms["register"].elements;

    //loop through and validate the input
    for (var i = 0; i < validate.length; i++) {
    var check = validate[i];

    //validate text input
    if (check.type == "text" && check.value === "") {
    displayMsg("Please fill out all fields." + check.innerHTML);
    return false;
    }

    //ensure text input is letters only
    var re = (/[a-z]/i);
    if (check.type === "text" && !re.test(check.value)) {
    displayMsg("Please enter only ");
    return false;
    }

    //ensure valid e-mail format
    var re = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
    if (check.type === "email" && !check.value.match(re)) {
    displayMsg("Please enter a valid email address");
    return false;
    }

    if (check.type === "date") {
    var finalDate = check.value.toString();
    finalDate = finalDate.replace(/-/g,"/");
    }
    }

    name = validate[0].value;
    email = validate[1].value;
    dob = finalDate;

    var id = JSON.stringify(register());
    console.log(id);
    }

    function register() {
    var id = $.post("http://turing.une.edu.au/~jbisho23/assignment2/register.php",
    {
    name: name,
    email: email,
    dob: dob
    });
    return id;
    }

    //sliding error message
    function displayMsg(msg) {
    var $test = $('.msg');

    if ($test.length == 0) {
    var $form = $('form');
    $form.append('<span class="msg">' + msg + '</span>');

    var $show = $('.msg');
    $show.addClass('show');
    $show.css('display', 'none');
    }

    $show.fadeToggle(1000);

    if ($show.hasClass('out'))
    $show.removeClass('out');
    }