From 096f178ecba06ef78c574b287f854c70108c8701 Mon Sep 17 00:00:00 2001 From: Mark Ford Date: Thu, 22 Feb 2018 16:17:36 +0000 Subject: [PATCH 1/3] Add validation for 'file' input types Add validation for 'number' input types Handle error styling on dates --- validation.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/validation.js b/validation.js index d46ad2c..08a4871 100644 --- a/validation.js +++ b/validation.js @@ -20,8 +20,8 @@ function clearValidation() { } function checkTextFields(errors) { - $(document).find('input[type="text"],input[type="password"], textarea').each(function () { - var $formgroup = $(this).parents('.form-group'); + $(document).find('input[type="text"], input[type="number"], input[type="password"], input[type="file"], textarea').each(function () { + var $formgroup = $(this).closest('.form-group'); var label = $(this).parent().find('label').clone().children().remove().end().text(); if ($formgroup.attr('data-required') !== undefined && $(this).val() === '' && !$(this).parent().hasClass('js-hidden')) { @@ -40,7 +40,7 @@ function checkTextFields(errors) { ); } }); - return; + return false; } function checkSelectors(errors) { @@ -97,6 +97,8 @@ function appendErrorMessages(errors) { ); var $formgroup = $(document).find('#' + errors[i].id).parents('.form-group'); $formgroup.addClass('form-group-error'); + // dates have 2 parent form-groups so remove the error class from the inner one + $('.form-group-error .form-group-error').removeClass('form-group-error') if ($formgroup.find('.error-message').length === 0) { if ($formgroup.find('input[type="text"], input[type="password"]').length > 0 || $formgroup.find('textarea').length > 0) { From 09371fe30b6f18e1cd512d8e2ca2a5c2ee589ef2 Mon Sep 17 00:00:00 2001 From: Mark Ford Date: Fri, 23 Feb 2018 12:13:10 +0000 Subject: [PATCH 2/3] fix dates validation --- validation.js | 294 ++++++++++++++++++++++++++++---------------------- 1 file changed, 165 insertions(+), 129 deletions(-) diff --git a/validation.js b/validation.js index 08a4871..518b5dd 100644 --- a/validation.js +++ b/validation.js @@ -1,150 +1,186 @@ -// Config -var defaultErrorHeading = 'There\'s been a problem'; -var defaultErrorDescription = 'Check the following'; -var defaultErrorMessage = 'There is an error'; +var properties = require('../../../lib/check/get-property') +module.exports = function(router) { + + router.get('/check/', function (req, res) { + + + res.render('./check/index.html',{ + 'property': properties.load(req), + 'h1': 'Tell us about a change to your property', + 'form': { + 'action':'/check-change-submit', + 'name': 'check-change-submit', + 'inputs':[ + { + 'type': 'snippet', + 'path': 'includes/check/_check-change-intro.html' + }, -function clearValidation() { - $('.error-summary').remove(); - $('.form-control-error').each(function () { - $(this).removeClass('form-control-error'); - }); - $('.error-message').each(function () { - $(this).remove(); - }); + //Initial selection on check - $('.form-group-error').each(function(){ - $(this).removeClass('form-group-error'); - }); -} + { + 'type': 'radio', + 'groupName': 'checkchangetype', + 'inline': false, + 'label': 'I want to (pick the one that applies):', + 'required': true, + 'errorText': 'Please select an option.', + 'radios':[ + { + 'id': 'internal', + 'label': 'confirm or change the information held for this property (for example if you’ve added a floor or floor area measurements are incorrect)', + 'value': 'internal' + }, + { + 'id': 'external', + 'label': 'tell you something external to this property has affected its value (such as long-term disruptive roadworks or scaffolding outside it)', + 'value': 'external' + }, + { + 'id': 'split', + 'label': 'tell you this property needs to be split into more than one', + 'value': 'split' + }, + + { + 'id': 'merged', + 'label': 'tell you this property needs to be merged with others (you’ll need to repeat this for each of the properties you want to merge)', + 'value': 'merged' + }, + { + 'id': 'removed', + 'label': 'tell you this property is not used for business or has been demolished', + 'value': 'removed' + }, + + { + 'id': 'courtdecision', + 'label': 'tell you this property has been subject to a court decision (including Supreme Court, High Court, Lands Tribunal or Valuation Tribunal decisions)', + 'value': 'courtdecision' + } + ] + } + ], + 'continueText': 'Continue', + 'continueDisabled': false, + 'backTo': '#' + } + }) + }), -function checkTextFields(errors) { - $(document).find('input[type="text"], input[type="number"], input[type="password"], input[type="file"], textarea').each(function () { - var $formgroup = $(this).closest('.form-group'); - var label = $(this).parent().find('label').clone().children().remove().end().text(); - if ($formgroup.attr('data-required') !== undefined && $(this).val() === '' && !$(this).parent().hasClass('js-hidden')) { - if ($(this).attr('id') === undefined) { - $(this).attr('id', $(this).attr('name')); - } - errors.push( - { - id: $(this).attr('id'), - name: $(this).attr('name'), - errorMessage: $formgroup.attr('data-error').toLowerCase() || defaultErrorMessage.toLowerCase(), - label: label, - type: 'text, password' - } - ); - } - }); - return false; -} -function checkSelectors(errors) { - var checked = []; - $(document).find('input[type="radio"], input[type="checkbox"]').each(function () { - var $fieldset = $(this).parents('fieldset'); - var label = $fieldset.find('legend').clone().children().remove().end().text(); - if ($fieldset.attr('data-required') !== undefined && $fieldset.find(':checked').length === 0) { - if ($(this).attr('id') === undefined) { - $(this).attr('id', $(this).attr('name')); - } + router.get('/check-change-submit', function (req, res) { - if (checked.indexOf($(this).attr('name')) < 0) { - checked.push($(this).attr('name')); - errors.push( - { - id: $(this).attr('id'), - name: $(this).attr('name'), - errorMessage: $fieldset.attr('data-error').toLowerCase() || defaultErrorMessage.toLowerCase(), - label: label, - type: 'text, password' - } - ); - } - } - }); -} + var checkchangetype = req.query.checkchangetype + switch (checkchangetype) { + case 'internal': + res.redirect('/check/confirm-or-change'); + break; + case 'external': + res.redirect('/check/external'); + break; -function appendErrorSummary() { - var summaryNotPresent = $(document).find('.error-summary').length === 0; - var summary = '
' + - '

' + - defaultErrorHeading + - '

' + - '

' + - defaultErrorDescription + - '

' + - '
    ' + - '
' + - '
'; - - if (summaryNotPresent) { - $('form').before(summary); - } -} + case 'split': + res.redirect('/check/split'); + break; + case 'merged': + res.redirect('/check/merged'); + break; + case 'removed': + res.redirect('/check/removed'); + break; + case 'courtdecision': + res.redirect('/check/courtdecision'); + break; -function appendErrorMessages(errors) { - for (var i = 0; i < errors.length; i++) { - if ($(document).find('a[href="#' + errors[i].id + '"]').length === 0) { - $('.error-summary-list').append( - '
  • ' + errors[i].label + ' - ' + errors[i].errorMessage + '
    • ' - ); - var $formgroup = $(document).find('#' + errors[i].id).parents('.form-group'); - $formgroup.addClass('form-group-error'); - // dates have 2 parent form-groups so remove the error class from the inner one - $('.form-group-error .form-group-error').removeClass('form-group-error') - - if ($formgroup.find('.error-message').length === 0) { - if ($formgroup.find('input[type="text"], input[type="password"]').length > 0 || $formgroup.find('textarea').length > 0) { - if ($formgroup.find('.form-date').length > 0) { - $formgroup.find('.form-date').before( - '' + - errors[i].errorMessage + - '' - ); - } else { - $formgroup.find('label').append( - '' + - errors[i].errorMessage + - '' - ); - $formgroup.find('.form-control').addClass('form-control-error'); - } - } else if ($formgroup.find('input[type="radio"]').length > 0 || $formgroup.find('input[type="checkbox"]')) { - $formgroup.find('legend').append( - '' + - errors[i].errorMessage + - '' - ); - } - } - } } -} + }), + + router.get('/check/confirm-or-change', function (req, res) { + res.render('./check/confirm-or-change',{ + 'property': properties.load(req) + }) + }), -$(document).on('submit', 'form', function (e) { - var requiredFieldsPresent = $(document).find('[data-required]').length > 0; + router.get('/check/basic-property-details', function (req, res) { + res.render('./check/basic-property-details',{ + 'property': properties.load(req) + }) + }), - clearValidation(); - if (requiredFieldsPresent) { - var errors = []; + router.get('/check/property-features', function (req, res) { + + + var proposedChange = req.query + if (Object.keys(proposedChange)[0] != undefined){ + for (var key in proposedChange) { + req.session.data.dashboardData.clientProperties.find(property => property.laRef == req.session.data.laRef).proposedChanges[key] = proposedChange[key] + } + } + + res.render('./check/property-features/index.html',{ + 'property': properties.load(req), + 'errors': req.query.errors + }) + }) + + router.get('/check/floor-areas', function (req, res) { + res.render('./check/floor-areas.html',{ + 'property': properties.load(req) + }) + }) + + router.get('/check/parking', function (req, res) { + res.render('./check/parking.html',{ + 'property': properties.load(req) + }) + }) + + + router.get('/check/supporting-documents', function (req, res) { + res.render('./check/supporting-documents.html',{ + 'property': properties.load(req), + 'form': { + 'action': '/check/supporting-documents-submit', + 'method': 'post', + 'inputs': [ + {'type': 'html', + 'html': '
    You should provide evidence to support any changes as this will help us make a decision.
    ' + }, + { + 'type': 'file', + 'name': 'newFile', + 'label': '' + } + ], + 'continueText': 'Continue', + 'continueDisabled': false, + } + }) + }) - checkTextFields(errors); - checkSelectors(errors); +router.get('/check/supporting-documents-submit', function (req, res) { + if (req.query){ + let formContents = req.query - if (errors.length > 0) { - e.preventDefault(); - appendErrorSummary(); - appendErrorMessages(errors); - $(document).scrollTop(0); + req.session.data.dashboardData.clientProperties.find(property => property.laRef == req.session.data.laRef).uploadedFile = formContents + } + res.redirect('/check/check-summary') } + ) - } -}); + router.get('/check/check-summary', function (req, res) { + res.render('./check/check-summary.html',{ + 'property': properties.load(req) + }) + }) + + +} From 348207bf18583895aa6a9e3f077923c0cccf8a57 Mon Sep 17 00:00:00 2001 From: Mark Ford Date: Fri, 23 Feb 2018 12:17:15 +0000 Subject: [PATCH 3/3] update README --- README.md | 83 +++++++++++++++++++++++++++++-------------------------- 1 file changed, 44 insertions(+), 39 deletions(-) diff --git a/README.md b/README.md index 633d6a8..acf22f0 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ There are a set of tests you can run against this code to check it is working as ### How does it work? -The plugin uses jQuery to check any `
    ` tags you have applied the data attribute of `data-required` to. It then checks you have made a selection or entered some characters. If the validation fails, the browser scrolls to the top of the page and shows the error message. +The plugin uses jQuery to check any divs with the `.form-group` class you have applied the data attribute of `data-required` to. It then checks you have made a selection or entered some characters. If the validation fails, the browser scrolls to the top of the page and shows the error message. Custom error messages can be passed in with `data-error="custom error message text"`. @@ -33,8 +33,7 @@ In order to make the validation work, your HTML markup must be correct. Below ar ##### Textarea ``` html -
    -
    +
    Do you have difficulty completing daily activities -
    ``` ##### Text input ``` html -
    -
    +
    -
    ``` @@ -64,71 +60,80 @@ In order to make the validation work, your HTML markup must be correct. Below ar ``` html
    -
    Date of birth

    For example, 31 3 1980

    -
    +
    -
    +
    -
    +
    -
    ``` ##### Radio Buttons ``` html -
    -
    - Do have a personal user account? +
    +
    - + +

    Where do you live?

    +     - -
    +
    + + +
    +
    + + +
    +

    or

    +
    + + +
    + +
    ``` ##### Checkboxes ``` html -
    -
    - Which documents do you have? +
    +
    - + +

    Which types of waste do you transport regularly?

    + Select all that apply +     - +
    + + +
    +
    + + +
    +
    + + +
    -
    ```