This is from Lab2 “JQuery for practical website upgrades” with the validation rules, messages and UK phone number fixed.

Code:

jQuery(document).ready(function () {
    $("#contactForm").validate({
        rules: {
            fullname: {
                required: true,
                minlength: 5
            },
            email: {
                required: true,
                email: true
            },
            phone: {
                mobileUK: true
            }
        },
        messages: {
            fullname: {
                required: "Please specify your name",
                minlength: "Name must has at least 5 characters!"
            },
            email: {
                required: "We need your email address to contact you",
                email: "Your email address must be in the format of name@domain.com"
            },
            phone: {
                ukPhone : "Phone must be a valid UK mobile number"
            }
        }
    })
});

HTML:

<h5>jQuery plugin validation of simple contact details</h5>
<form id="contactForm" action="http://pict.uws.ac.uk/cgi-davison/contacts.py" method="post">
  <fieldset>
    <label for="fullname">Full name (Required):</label><br />
    <input id="fullname" name="fullname" size="40" type="text" /><br />
    <label for="phone">Phone Number:</label><br />
    <input id="phone" name="phone" size="40" type="text" /><br />
    <label for="email">e-mail (Required):</label><br />
    <input id="email" name="email" size="40" type="email" /><br />
    <input class="submit" type="submit" value="Register Contact Details" />
  </fieldset>
</form>

Problems/Mistakes/Bugs:

  • The JQuary validation code failed to run until I loaded a proper version of JQuery (3.x). I loaded first the JQuery then I loaded the Validation code then the additional-methods code then my code at the end to control the form.
  • I updated the script, but nothing happened in the form, after many tries, I realised that the bowser was keeping an old version of the code in its cash memory.

Lessons Learnt:

  • Always read the API documentation before using it.
  • Clear the browser cash regularly.

Result:

jQuery plugin validation of simple contact details