Customizing error message

Forms
1

I am creating a rather long form with a lot of required fields. When submitting the form the error message for required fields appears above the form, which in my case is too far from the submit button to be visible.

Is there any way to control the placement and content of the error message?

2

Dear @SiggiBSI,
You can run the following code, by utilizing form validators, custom submit button, and by cloning the error message achieve the results you are looking for:

fd.spRendered(function(){
    fd.validators.push({
      name: 'FieldValidator',
      error: 'Custom error message',
      validate: function() {
          if (!fd.field('Title').value){
              this.error = 'Title field is required';
              return false;
          }
          if (!fd.field('Department').value){
              this.error = 'Department field is required';
              return false;
          }
          return true;
      }
  });

  $('.submit-button').on('click', function() {
    $('.clone').remove();
    if(fd.isValid){
      fd.save();
    }
    function copyAndMoveErrorMessage() {
      var clone = $('div.alert.alert-danger').clone().addClass('clone').insertBefore('.submit-button');
      clone.find($('button.close')).on('click', function() { clone.remove(); });
    }
    setTimeout(copyAndMoveErrorMessage, 500);
  });
});

Make sure that you give your custom submit button a submit-button CSS class, or use another class name, but replace it in the code as well.

1 Like