Packtpub Error Testing

index.html

<form id="webForm" method="POST">
      <div class="header">
         <h3>Register</h3>
      </div>
      <div class="input-frame">
         <label for="firstName">First Name:</label>
         <input name="firstName" id="firstName" type="text" class="required" />
      </div>
      <div class="input-frame">
         <label for="lastName">Last Name:</label>
         <input name="lastName" id="lastName" type="text" class="required" />
      </div>
      <div class="input-frame">
         <label for="email">Email:</label>
         <input name="email" id="email" type="text" class="required email" />
      </div>
      <div class="input-frame">
         <label for="number">Telephone:</label>
         <input name="number" id="number" type="text" class="number" />
      </div>
      <div class="input-frame">
         <label for="dob">Date of Birth:</label>
         <input name="dob" id="dob" type="text" class="required date" placeholder="DD/MM/YYYY"/>
      </div>
      <div class="input-frame">
         <label for="creditCard">Credit Card #:</label>
         <input name="creditCard" id="creditCard" type="text" class="required credit-card" />
      </div>
      <div class="input-frame">
         <label for="password">Password:</label>
         <input name="password" id="password" type="password" class="required" />
      </div>
      <div class="input-frame">
         <label for="confirmPassword">Confirm Password:</label>
            <input name="confirmPassword" id="confirmPassword" type="password" class="required" />
      </div>
      <div class="actions">
         <button class="submit-btn">Submit</button>
      </div>
   </form>

script.js

function validateNumber(value) {
    if (value !== "") {
        return !isNaN(parseInt(value, 10)) && isFinite(value);
        //isFinite, in case letter is on the end
    }
    return true;
}

function validateCreditCard(value) {
    if (value !== "") {
        return /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/.test(value);
    }
    return true;
}

function validateDate(value) {
    if (value !== "") {
        if (/^\d{2}([.\/-])\d{2}\1\d{4}$/.test(value)) {
            // Remove leading zeros
            value = value.replace(/0*(\d*)/gi, "$1");
            var dateValues = value.split(/[\.|\/|-]/);
            // Correct the month value as month index starts at 0 now 1 (e.g. 0 = Jan, 1 = Feb)
            dateValues[1]--;
            var date = new Date(dateValues[2], dateValues[1], dateValues[0]);
            if (date.getDate() == dateValues[0] && date.getMonth() == dateValues[1] && date.getFullYear() == dateValues[2]) {
                return true;
            }
        }
        return false;
    } else {
        return true;
    }
}

function validateEmail(value) {
    if (value !== "") {
        return /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/i.test(value);
    }
    return true;
}

function validateRequired(value) {
    if (value === "") return false;
    return true;
}

function addErrorData(element, error) {
    element.parent().addClass('error');
    element.after("<div class='error-data'>" + error + "</div>");
}

for (var i = 0; i < inputs.length; i++) {
    var input = inputs[i];
    doValidation(input);
}

function doValidation(input) {
    /** Remove old errors */
    $(input).parent().removeClass('error');
    $(input).next('.error-data').remove();

    if ($(input).hasClass('required') && !validateRequired($(input).val())) {
        addErrorData($(input), "This is a required field");
    }
    if ($(input).hasClass('email') && !validateEmail($($(input)).val())) {
        addErrorData($(input), "Invalid email address provided");
    }
    if ($(input).hasClass('number') && !validateNumber($(input).val())) {
        addErrorData($(input), "This field can only contain numbers");
    }
    if ($(input).hasClass('date') && !validateDate($(input).val())) {
        addErrorData($(input), "Invalid date provided");
    }
    if ($(input).hasClass('credit-card') && !validateCreditCard($(input).val())) {
        addErrorData($(input), "Invalid credit card number");
    }
}

if ($('.error-data').length == 0) {
    /** No errors, submit the form */
    $('#webForm').submit();
}

jQuery(document).ready(function($) {
    $('input').on("keyup", function() {
        doValidation($(this));
    });
});