CODEWITHSUNDEEP
javascriptvalidation
Web Develop Wolf
Web Develop Wolf

Reputation: 6326

Form Validation Not Resetting After Failing Validation

I'm using a small script to validate a postcode, which works and stops the user entering an invalid password, but when an invalid post code is entered you then can't submit a correct entry. For example, if I enter 'ST' I get the message telling me the postcode is invalid, so without refreshing the page manually I enter 'ST6 1SA' (which is a valid Stoke postcode) and I can't submit the form, I just keep getting the invalid tool tip advising me the post code is not in the correct format.

JS: 

<script>
   // Validate the postcode before it's sent
   (function () {
      var postcode = document.getElementById('postcode-entry');
      var wrapper = document.getElementById('validation');
      var notify = document.createElement('div');
      var mnisLookup = document.getElementById('mnis-results');
      var matchingClients = document.getElementById('matching-clients');
      var postcodeWrapper = document.getElementById('postcode-wrapper');

      notify.id = 'notify';
      notify.style.display = 'none';
      wrapper.appendChild(notify);

      postcode.addEventListener('invalid', function (event) {
         if (!event.target.validity.valid) {
         notify.textContent = 'Please enter a valid postcode e.g. ST1, ST1 4BJ';
         notify.className = 'error';
         notify.style.display = 'block';

         postcode.className = 'form-control invalid';
      }                
   });
})();
</script>

HTML:

<form id="postcode-wrapper" class="form-horizontal">
        <div id="postcode-lookup" class="form-group">
            <label for="postcode-entry" class="col-sm-1">Postcode:</label>
            <div id="postcode-entry-wrapper" class="col-sm-3">
                <input type="text" pattern="^(([gG][iI][rR] {0,}0[aA]{2})|((([a-pr-uwyzA-PR-UWYZ][a-hk-yA-HK-Y]?[0-9][0-9]?)|(([a-pr-uwyzA-PR-UWYZ][0-9][a-hjkstuwA-HJKSTUW])|([a-pr-uwyzA-PR-UWYZ][a-hk-yA-HK-Y][0-9][abehmnprv-yABEHMNPRV-Y])))( {0,}[0-9][abd-hjlnp-uw-zABD-HJLNP-UW-Z]{2})?))$" oninvalid="setCustomValidity('Invalid Post Code Format ')" class="form-control" id="postcode-entry" placeholder="Enter your postcode" name="Postcode" />
            </div>
            <div class="col-sm-1">
                <input id="search" type="submit" value="Search" class="btn btn-default" />
            </div>
            <div id="validation" class="col-sm-7"></div>
        </div>
    </form>

Just a quick note that may affect how the page is refreshing, this is inside an MVC Razor page and wrapped with Html.BeginForm - not sure if that makes a difference?

Upvotes: 1

Views: 1092

Answers (1)

Shubham Shukla
Shubham Shukla

Reputation: 226

While debugging your code, i found that the event.target.validity.valid was returning false even if the input was valid e.g. 'ST6 1SA'. This was occuring because it does not update the custom validation for the new input and the previous state persists even after entering the valid input.

So to update and reset the previous validation, you have to reset setCustomValidity('') on input change, i.e. oninput="setCustomValidity('')"

Please replace this code:

<input type="text" pattern="^(([gG][iI][rR] {0,}0[aA]{2})|((([a-pr-uwyzA-PR-UWYZ][a-hk-yA-HK-Y]?[0-9][0-9]?)|(([a-pr-uwyzA-PR-UWYZ][0-9][a-hjkstuwA-HJKSTUW])|([a-pr-uwyzA-PR-UWYZ][a-hk-yA-HK-Y][0-9][abehmnprv-yABEHMNPRV-Y])))( {0,}[0-9][abd-hjlnp-uw-zABD-HJLNP-UW-Z]{2})?))$" oninvalid="setCustomValidity('Invalid Post Code Format ')" class="form-control" id="postcode-entry" placeholder="Enter your postcode" name="Postcode" oninput="setCustomValidity('')"/>

Upvotes: 4

Related Questions