How to include custom field validation function in HTML form validation?

Question

I have custom password validation function in my form. On the same form I use HTML5 validation on all other fields. I'm wondering if there is a good way to include this function in HTML validation? Here is example of my custom password validation function:

$('#myaccount-password').keyup(checkPsw).focus(function() {
  $('#pswd_info').show();
}).blur(function() {
  $('#pswd_info').hide();
});

function checkPsw() {
  var pswd = $(this).val();

  //validate the length
  if (pswd.length < 8) {
    $('#length').removeClass('valid').addClass('invalid');
  } else {
    $('#length').removeClass('invalid').addClass('valid');
  }

  //validate letter
  if (pswd.match(/[a-z]/)) {
    $('#letter').removeClass('invalid').addClass('valid');
  } else {
    $('#letter').removeClass('valid').addClass('invalid');
  }

  //validate capital letter
  if (pswd.match(/[A-Z]/)) {
    $('#capital').removeClass('invalid').addClass('valid');
  } else {
    $('#capital').removeClass('valid').addClass('invalid');
  }

  //validate special character
  if (pswd.match(/(?=.*[?!@])/)) {
    $('#character').removeClass('invalid').addClass('valid');
  } else {
    $('#character').removeClass('valid').addClass('invalid');
  }

  //validate number
  if (pswd.match(/\d/)) {
    $('#number').removeClass('invalid').addClass('valid');
  } else {
    $('#number').removeClass('valid').addClass('invalid');
  }
}

.password-container {
  position: relative;
}

#pswd_info {
  position: absolute;
  font-size: .875em;
}

#pswd_info::before {
  content: "\25B2";
  position: absolute;
  top: -12px;
  left: 45%;
  font-size: 14px;
  line-height: 12px;
  color: #337ab7;
  text-shadow: none;
  display: block;
}

#pswd_info ul {
  margin: 0;
  padding: 0;
}

#pswd_info li {
  list-style: none;
}

.invalid {
  color: #ec3f41;
}

.valid {
  color: #3a7d34;
}

#pswd_info {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group required password-container">
  <label class="control-label" for="password">Password</label>
  <input type="password" class="form-control" name="myaccount-password" id="myaccount-password" placeholder="Enter Password" maxlength="64" required>
  <div id="pswd_info" class="panel panel-primary">
    <div class="panel-heading">
      <h5>Password requirements:</h5>
    </div>
    <div class="panel-body">
      <ul>
        <li id="letter" class="invalid">At least <strong>one letter</strong></li>
        <li id="capital" class="invalid">At least <strong>one capital letter</strong></li>
        <li id="number" class="invalid">At least <strong>one number</strong></li>
        <li id="character" class="invalid">At least <strong>one special character</strong></li>
        <li id="length" class="invalid">Be at least <strong>8 characters</strong></li>
      </ul>
    </div>
  </div>
</div>

and here is example of my function that is used to submit the form:

$('#frm-myForm').on('submit', function(e){
    e.preventDefault(); 
    var formData = $('#frm-myForm').serialize();

    $.ajax({
        type: 'POST',
        url: 'AjaxFunctions.cfc?method=myForm',
        data: formData,
        dataType: 'json'
    }).done(function(obj){
            console.log(obj);
    }).fail(function(jqXHR, textStatus, errorThrown){
        alert("Error: "+errorThrown);
    });
});

Function above will trigger HTML5 validation but that won't check if my password is valid or not. Is there a way to check if all password requirements are met before form submit is processed? Thanks in advance.

Answer 1

Your password validation is basically minimun 8 charcaters, one small letter, one capital letter, one number and one of the three special characters @!?

for this you can use in built pattern attribute on the password input with pattern as

^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[?!@])[A-Za-z\d@!?]{8,}$

this way you don't have to write complex validation conditions

<input type="password" class="form-control" name="myaccount-password"
id="myaccount-password" placeholder="Enter Password" maxlength="64"
pattern="^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[?!@])[A-Za-z\d@!?]{8,}$" required>

The browser support for pattern attribute is here

For custom error messages on pattern mismatch you can use title attribute

<input type="password" class="form-control" name="myaccount-password"
id="myaccount-password" placeholder="Enter Password" maxlength="64"\
title="Password must be minimum 8 characters length with at least one small, one capital letter, one number and a special character"
pattern="^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[?!@])[A-Za-z\d@!?]{8,}$" required>

Regex101