• A new version of Full Calendar is now available.

    See the details here

Highlight required elements

  • Views Views: 9,492
  • Last updated Last updated:

Navigation

      Access element (+)
      Birthday element
      Button element
      Calculation element
      Captcha element
      Checkbox element
      Colour Picker element
      Count element (+)
      Database join element
      Date element
      Digg element
      Display text element
      Dropdown element
      Facebook Like element
      Field element
      File Upload element
      Folder element
      Google Map element
      Image element
         Image databese join
      Internal id element
      IP element
      J!Date element
      Kaltura element
      Link element
      Notes element
      OpenStreetMap element
      Picklist element
      Radio Button element
      Rating element
      Sequence element
      Slider element
      Tags element
      Textarea element
      Thumbs element
      Time element
      Timer element
      Timestamp element
      Total element
      User element
      User group element
      Video element
      View level element
      YesNo element
      Youtube element
      Akismet validation
      Is Email validation
      Is Not validation
      Is Numeric validation
      Not empty validation
      PHP validation
      Rsa id
  • Following this tutorial will achieve the effect of:
    • no error message at the top of the form
    • styled field that requires Validation
    • adding custom 'alert.png' icon
    • 'hiding' 'notempty.png' icon
    before:

    Required fields before 2.PNG


    Required field before 1.PNG


    after:

    Ff required fields after.PNG


    Please make a backup before making these changes so that you can revert to it if you encounter problems.

    Implementation steps​

    1. create alternative image to default_rounded/images/alert.png
    2. upload to your_form_template/alert.png
    3. create alternative image to media/com_fabrik/notempty.png (i made this a transparent png in my example)
    4. upload to server and overwrite (will update this step when i know how to override media folder files)
    5. change error message css

    How to change error message css​

    In, e.g. 'default_rounded' template's template_css.php, find:

    CSS:
    .{$view}_$c .fabrikError,
    .{$view}_$c .fabrikNotice,
    .{$view}_$c .fabrikValidating,
    .{$view}_$c .fabrikSuccess {
    font-weight: bold;
    }

    .{$view}_$c .fabrikMainError {
    height:2em;
    line-height:2em;
    }

    .{$view}_$c .fabrikMainError img {
    padding:0.35em 1em;
    float:left;
    }

    .{$view}_$c .fabrikNotice {
    color: #009FBF;
    background: #DFFDFF url(images/alert.png) no-repeat center left !important;
    }

    .{$view}_$c .fabrikError,
    .{$view}_$c .fabrikGroup .fabrikError {
    color: #c00;
    background: #EFE7B8;
    }

    .{$view}_$c .fabrikErrorMessage {
    padding-right: 5px;
    }
    and replace with:
    CSS:
    .{$view}_$c .fabrikError,
    .{$view}_$c .fabrikNotice,
    .{$view}_$c .fabrikValidating,
    .{$view}_$c .fabrikSuccess {
    font-weight: bold;
    }

    .{$view}_$c .fabrikMainError {
    display: none;
    }

    .{$view}_$c .fabrikMainError img {
    display: none;
    }

    .{$view}_$c .fabrikNotice {
    color: #009FBF;
    background: #DFFDFF url(images/alert.png) no-repeat center left !important;
    }

    .{$view}_$c .fabrikError {
    }

    .{$view}_$c .fabrikGroup .fabrikError {
    border: 0px;
    border-radius: 10px;
    background-color: #C7C7C7 !important;
    background-image: none !important;
    color: #4C4C4C;
    margin-bottom: 0px;
    font-weight: normal;
    padding-left:10px;
    margin-top: 10px;
    }

    .{$view}_$c .fabrikErrorMessage {
    padding-right: 5px;
    position: absolute;
    right: 0px;
    }

    Bugs​

    Firefox is not adding padding-left to the text in the tooltips associated with the 'alert.png' icon - if anyone can figure out how to fix this in firefox it would be much appreciated.

    The 'spinner' background is not covering the whole width of the form and therefore the background of the 'required field' is showing to the right of the 'spinner' area when navigating between pages on a multipage form.
Back
Top