Custom info message on field select

[timsbryan]

Hi,

Thanks for your work on this plugin. It was quick to setup but I have just one question...

I'm wondering if there's a way to create a custom info field once a e.g. text input has been focused. I have this working on a select box where an error message gets displayed on i.e. :

'title': {
  filters: 'required exclude',
  data: { exclude: ['default'] },
  errors : { exclude: 'Select a title.' }
}

I'd like the information to be helpful such as 'Enter your first name here' rather than an error message as such. This is may or may not have the required filter enabled. Seems like a simple problem that I just can't quite figure it out.

Any help is greatly appreciated. Thanks, Tim

[elclanrs]

Well, the thing is that the error will show only if the value is invalid, it wasn't meant as just an informational popup. You can customize the error message, but there still needs to be an error for the popup to show up.

What you can do is add your custom message as markup like:

<div>
  <label>Username:</label>
  <input id="username" name="username" type="text"/>
  <span class="message">Enter your username here.</span>
</div>

Now you can position it with css and hide it. These are the properties needed for it to work properly, but you can customize the background color, font size etc.

span.message {
  position: absolute;
  z-index: 999;
  display: none;
}

Finally you can create a custom flag to show the message only when it's needed. When the field is focused then show the message (keyup needed because of the tab events). If the field loses focus or has a value that might trigger the error then hide it.

$.extend( $.idealforms.flags, {
  message: function( $input,e ) {
    var $message = $input.parent().siblings('.message');
    $message.toggle( !$input.val() && ( e === 'focus' || e === 'keyup' ) );
  }
});

// In your Ideal Form...
'username': {
  filters: 'required username',
  flags: 'message'
}

You could also show the message by clicking an "info" icon or something like that. The point here is that you can add the markup you want, absolute position it so it doesn't interfere with other elements and if needed create a flag that does something based on the event that was triggered and the value of the input.

Just make sure to get the element correctly from within the flag because Ideal Forms generates some extra markup. $input.parent().siblings('element');

[timsbryan]

Thank you for your in depth description. That worked well :+1: :)