Form validation behavior

You could not use the out-of-the-box required field property and then use the JS API to write your own custom validation behavior: http://developers.marketo.com/javascript-api/forms/api-reference/

This requirement has technical catches because of the way Marketo native validation events are handled (namely, by focusing the first invalid field) but you can get much of what you want with this: MktoForms2 :: Validate onBlur.

For more control, you have to use all custom validation like Jason said.

I haven't been able to move the needle on this, despite the resources @Jason Long and @Sanford Whitman provided. Perhaps more context will help explain where I'm stuck. (Unfortunately I'm not able to provide a URL to a live project).

I have a Marketo form with several text input fields, a few select elements and a texture on a WordPress page. For simplicity sake, I'll just focus on the first text input field (input#FirstName) of the form. This is standard Marketo-generated form HTML:

<div class="mktoFieldWrap mktoRequiredField">
    <label for="FirstName" class="mktoLabel mktoHasWidth" style="width: 100px;">
        <div class="mktoAsterix">*</div>First name:
    </label>
    <div class="mktoGutter mktoHasWidth" style="width: 10px;"></div>
    <input id="FirstName" name="FirstName" placeholder="First name" maxlength="255" type="text" class="mktoField mktoTextField mktoHasWidth mktoRequired mktoInvalid">
    <div class="mktoError">
        <div class="mktoErrorArrowWrap">
            <div class="mktoErrorArrow"></div>
        </div>
    </div>
    <div class="mktoErrorMsg">This field is required.</div>
    <div class="mktoClear"></div>
    <div class="mktoClear"></div>
</div>

I've managed to style the validation warning messages and hide them initially:

// style the warning messages
div.mktoError {
  display: none !important; /* hide the error boxes */
  font-size: 12px !important;
  div.mktoErrorMsg,
  div.mktoErrorArrow {
    background-color: $required-field-bkgd !important;
    background-image: none !important;
    border-color: $required-field-bkgd !important;
    box-shadow: rgba(0,0,0,0.25) 0px 2px 7px 0px, $required-field-bkgd 0px 1px 0px 0px inset !important;
    text-shadow: none !important;
  }
}

I'm trying to show the validation warning message when the FirstName field loses focus. I'm able to send a message to the console and change the background color of the blurred field when tabbing to the next field, but I can't seem to get the validation message to show when tabbing. If I focus the FirstName field and then click anywhere else on the page other than another form field, the validation warning message will appear:

<script src="//app-ab16.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_1435"></form>
<script>
  MktoForms2.loadForm("//app-ab16.marketo.com", "335-QLG-882", 1435, function(form){
    // give the first input field focus
    jQuery("input#FirstName.mktoField.mktoTextField.mktoHasWidth").focus();
    // when the first input field loses focus...
    jQuery("input#FirstName.mktoField.mktoTextField.mktoHasWidth").blur(function(){
      // shout
      console.log('You have left the first field'); // this works
      // change its background color to blue,
      jQuery("input#FirstName.mktoField.mktoTextField.mktoHasWidth").css('cssText', 'background-color:blue !important;'); // this works
      // show the field's error element
      jQuery("input#FirstName.mktoField.mktoTextField.mktoHasWidth").parent().children("div.mktoError").css('cssText', 'display:block !important;'); // this fails
    });
  });
</script>

So, the TL;DR: Is it possible to manually display the Marketo form validation warning message on the blur event when tabbing through form fields, and if so, how?

Thank you.

Mind if I bump this up because this behavior is really odd out of the box and in my opinion the Required functionality should be modified.

First, the UI Tool Tip to notify the user when the element is required displays on the second time the user focuses in on an input which is odd. In my opinon form validation should ONLY occur when the user attempts to submit a form, not when they have focused in on an element, or blur'd on the element. It's kind of bad UX to display an error when the user simply focuses/blur's on inputs.

Secondly, this appears to be a bug within Marketo itself, since the input elements actually become invalid with the `mktoInvalid` class, once the user does focus in on the element as the OP pointed out in this thread.

I'm trying to customize a Marketo landing page with an embedded form, and creating a custom validation class is not an answer or viable solution. I really do think that this bug should be addressed or validation to be customized a bit more when it comes to using an out of the box form.