How to add reset button in my drupal custom module

Question

I have this code in 'myform.module':

<?php
function myform_menu(){
  $menuItems = array(); 

  $menuItems['myFirstForm'] = array(
    'title' => 'My First Form',
    'menu_name' => 'main-menu',
    'file' => 'myform.inc',
    'access arguments' => array('access content'),
    'page callback' => 'myform_callback',
  );  

  return $menuItems;
}

In my 'myform.inc' file:

<?php
function myform_callback(){
  return drupal_get_form('myform_selectors');
}

function myform_selectors($form, &$form_state){      
    $form['colors'] = array(
      '#type' => 'select',
      '#options' => array(
        '0' => t('blue'),
        '1' => t('red'),        
      ),
      '#required' => TRUE,      
    );  

    $form['buttons']['submit'] = array(
      '#type' => 'submit',
      '#value' => t('Submit'),  
    );

    $form['buttons']['cancel_1'] = array(
      '#type' => 'submit',
      '#value' => 'Reset form',
      '#validate' => array(),
      '#submit' => array('myform_selectors_cancel_submit'),      
    );

    $form['buttons']['cancel_2'] = array(
      '#markup' => '<input '. drupal_attributes(array('type' => 'reset', 'value' => t('Reset -') )) .' class="form-reset" />',
    );

    $form['buttons']['cancel_3'] = array(
      '#type' => 'button',
      '#button_type' => 'reset',
      '#value' => t('Clear -'),
      '#weight' => 9,
      '#validate' => array(),
      '#attributes' => array(
            'onclick' => 'this.form.reset(); return false;',
          ),
    );

    return $form;
}

// VALIDATION
function myform_selectors_validate(&$form, &$form_state){
  echo '<script type="text/javascript">alert("validation!"); </script>';
  if($form_state['values']['colors'] == '1'){
    form_set_error('colors', 'red is not good color!');
  }
}

// SUBMIT BUTTON
function myform_selectors_submit(&$form, &$form_state){
  drupal_set_message('ok');
}

// RESET BUTTON
function myform_selectors_cancel_submit(&$form, &$form_state){
  $form_state['rebuild'] = TRUE;
  drupal_set_message('canceled');
}

Check please short video to see bad behaviour of 3 kind type reset buttons over here>>.

I would like to have reset button which brings default values but for required items doesn't mark with red border around.

I'm playing with this 2 days without success.

Thanks

Answer 1

Problem could be that It's a submit button, and that occurs before javascript. If you want to use javascript, You should use a link instead and css as button. button_type just add classes https://api.drupal.org/api/drupal/developer%21topics%21forms_api_reference.html/7#button_type