1,399 thoughts on “Zebra_Form, a jQuery augmented PHP library for creating and validating HTML forms

  1. Jaco Roux

    Another issue with the date picker.

    When using the direction method like this:

    The direction works and it disables the correct dates etc but when trying to submit the form it gives an error on the date rule.

  2. Aries Grogg

    Hello Stefan,

    We are starting a new project and have been testing various form frameworks including yours. Nice work. I may have missed this in the documentation somewhere but we are looking for a way to specify label vs. value in the option list of a select box. Currently you can send a list of options but those values are used for both the display label and the value for each selection option listed. Is there way to use a discrete label/value arrays.

    Practical example: Select list with states
    Label: California Value: CA
    Label: Colorado Value: CO


    1. Aries Grogg

      I found the information I was looking for in your comments section. Missed it before. The labels and values are part of the array structure for the options list.


  3. Marty

    adding a web link with a percent sign is breaking the form validation. If I hit submit, instead of it doing real time validation, it refreshes the page and i got a box that says the field is required and it blanks out what was in the filed. The like has the following in it. “ID=%A7%”


  4. Grüne Leuchte

    Hi Stefan,
    I’m stuck with this checkbox issue:
    I add several checkboxes as array this way:

    $obj = $form->add(
    $obj->set_attributes(['value' => $idOfFileToDelete]);

    Since this code is executed multiple times in a foreach() it produces 5 checkboxes.
    For some reason I haven’t completely understood the form doesn’t validate if I check one of these checkboxes. Form validates if I don’t check any the checkboxes.
    It seems that Zebra_Form-internally the value of the checked checkbox is empty. I have double-checked that the form actually submits a value.
    I stopped investigating when I saw that in the function validate_control() the array $values[] remains empty. Probably it should contain all the values of the checkboxes named above.
    Why I set the value via set_attributes() and not directly in the add() method? The value ($idOfFileToDelete) is dynamic, however the $attachment_type_id is predictable so I can reference the checkbox controls in the template to render them.

    Hope you can help me get the form validating again. 🙂

    Thanx and best regards

    1. Grüne Leuchte

      In the meantime I worked around by adding an extra input field (not displaying) that holds the needed value.
      Anyway I would like to understand if it is possible to “inject” another value to a checkbox.

  5. saltymouse

    Hey Stefan,
    I love the simplicity of generating forms with zebra_forms, but I’m still new to PHP and forms, so I can’t figure out how to grab the values and pass it on to a mailer.

    You mentioned you used PHPmailer before. Could you show an example for noobs like me on how to integrate zebra_form with PHPmailer?

  6. saltymouse

    I’ve figured out how to take form values and use those in PHPmailer by setting each form-field with a different variable name like:

    $product_name = $form->add('text', 'product_name');

    which you can later call down in the

    if ( $form->validate() ) {

    section as:

    //...PHPmailer settings and stuff...
    $mail->Body .= $product_name->submitted_value;

    However, I’m now trying to have a confirmation modal pop-up with all the inputted values for the user to confirm before sending, then only send if the modal “confirm” is pressed. If I place the modal pop-up on the submit button eventHandler, and then submit the form from there, I miss out on the Zebra_Form JS validation.

    I’ve tried placing it in different places inside the zebra_form.src.js file trying to trigger it after validation, but no such luck with my random shots.

    Is it possible to trigger a confirm modal after JS validation and before form submission?

    1. saltymouse

      I think I realized how to control the validation and submission separately in JS as per the documentation, however, I’m having trouble setting it up.

      If I try to grab my Zebra_Form object in my inline JS like this:

      $(document).ready(function() {
      var $form = $('#formname').data('Zebra_Form');

      $form is ‘undefined’ and thus can’t use the .validate() method. However, if I enter the same command from the browser console, it allows me to set $form to the Zebra_Form object, and I’m able to run $form.validate(); from the browser console without errors. Why is it that I can’t grab my Zebra_Form object from a but I can from the console?

    2. Stefan Gabos Post author

      $form is undefined because the form is not initialized yet at that point; you have to create the form, in PHP, like

      $form = new Zebra_Form('my_form');
          'on_ready'  =>  'some_function',

      …then, in you JavaScript you can do

      // this *needs* to be in the global scope
      var some_function = function() {
          var $form = $('#formname').data('Zebra_Form');
          if ($form.validate()) {
              // do something 
          } else {
              // do something
      $(document).ready(function() {
    3. Stefan Gabos Post author

      The submitted values are in the $_POST superglobal, where they belong 🙂

    4. saltymouse

      Thank you for the reply, Stefan. I actually got my form working in a very strange (bad!) way by setting my $form value inside a setTimeout function (inside the standard jQuery function). I have no idea why it works, but it does (so bad!)

      I’ll go back and try to fix the code to use the global variable instead, as you suggested!

      By the way, I have a Japanese translation file I used for my project. I’ll paste it here, but you can remove it from this post after you get it, if you want.

      $this->language = array(
          'clear_date'    => '日付を消す',
          'csrf_detected' => '送信に問題がありました。送信するまでの時間が長すぎるかもしれません。もしくは今送った送信リクエストが重複している為こちらのメッセージが表示されているかもしれません。また送信して下さい',
          'days'          => array('日','月','火','水','木','金','土'),
          'days_abbr'     => false,   // Japanese has different abbreviations (used above) so this is set to false
          'months'        => array('1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'),
          'months_abbr'   => false,   // Japanese has no month abbreviations
          'new_captcha'   => '新しい承認記号に変える',
          'other'         => 'その他...',
          'select'        => '《 選択して下さい 》',
          'spam_detected' => '先程送信したメッセージはスパム行為の恐れがありましたので、送信しませんでした',
          'today'         => '今日',
  7. Grüne Leuchte

    Stefan, is there a way to change the range rule by JavaScript/jQuery depending on user interaction or can you recommend a way?

    1. Grüne Leuchte

      More specific: I want to dynamically change the minimum and maximum allowed values and the error message.

  8. Angelos Mantas

    Hello Stefan,

    I an trying to use the change_case(‘upper) function attached to a text field. Althought the visible part seems to work properly the returned value I am receiving is not a text in uppercase.

    Best regards,

    1. Stefan Gabos Post author

      I am unable to reproduce this. What browser are you using? (I’ve tried Firefox, Chrome, Internet Explorer 11 and Edge) Can you give some more details on how are you checking the result?

  9. Hugo


    I’m using OVH as a host and using zebra_form leads me to a 500 error on render() usage.

    Did anyone come accross this issue in the past?

  10. Dima

    Hello, Just started using zebra form. Its very handy and saves a lot of time. What I find very uncomfortable is the fact that I can’t set custom class to containers (div class=”row”). Which makes it real pain to style the form…

  11. Matthias

    Hello, Is it possible to have an autosubmit? I want a submit when the user changed a selection from selection drop down list.
    This way i could use your lib also in my search/filter masks.

  12. Natalie

    I was having trouble adding a tabindex to a radio button field when it had more than one radio button and I couldn’t find any documentation on how to do it so I though I’d put here in case it helps someone

    $form->add('label', 'label_english', 'english', 'Is English your first language?');
    $obj = $form->add('radios', 'english', array(
        'Yes' =>  'Yes',
        'No' =>  'No',
    $obj->set_attributes(array('tabindex' => 10), false);

    So you need to add the ‘tabindex’ using ‘set_attributes’ and you have to use the ‘false’ flag.

    This just puts the tabindex on the first radio button – which is logical

  13. rob

    Is there an example of what a template file looks like? I’d like to have a 2-column form layout.

Comments are closed.