If you need to validate your Hatchbuck form on a WordPress website, here's how:

  • Completely remove the Jotform scripts (there are 2 script tags that you have to remove)
  • Add this Javascript function to ensure the data entered is validated:
<script> 
function validateForm() {
  var isValid = true;
  for (var i = 0; i < document.forms['hb-form'].length; i++) {
    var classStr = document.forms['hb-form'][i].className;
    if (classStr.indexOf('validate') != -1) {
      var validationStr = classStr.substring(classStr.indexOf('validate[') + 9, classStr.indexOf(']'));
      var validationList = validationStr.split(', ');
      var testValue = document.forms['hb-form'][i].value;
      for (var j = 0; j < validationList.length; j++) {
        if (validationList[j] == 'required') {
          if (testValue === null || testValue === '') {
            document.forms['hb-form'][i].className += 'form-validation-error';
            isValid = false;
          }
        } else if (validationList[j] == 'Email') {
          var atPos = testValue.indexOf('@');
          var dotPos = testValue.lastIndexOf('.');
          if (atPos < 1 || dotPos < atPos + 2 || dotPos + 2 >= testValue.length) {
            document.forms['hb-form'][i].className += 'form-validation-error';
            isValid = false;
          }
        }
      }
    }
  }
  return isValid;
} 
</script>

 

  • In the <form> tag add this attribute: onsubmit='return validateForm()'
  • On the button with type='submit', remove the class 'form-submit-button'