Form States conflict I've two forms in a page, one of the field name is same in both forms.

&lt;form id="form1"&gt;
   &lt;div class="div1"&gt;
        &lt;select id="field_a" name="field_a_name"&gt; ... &lt;/select&gt;
    &lt;/div&gt;
&lt;/form&gt;

&lt;form id="form2"&gt;
   &lt;div class="div2"&gt;
        &lt;select id="field_a" name="field_a_name"&gt; ... &lt;/select&gt;
    &lt;/div&gt;
&lt;/form&gt;


In hook form_alter, i assign the states to the field:

 $field_state = array( 'visible' =&gt; array(':input[name="field_a_name"]'  
 =&gt; array( array('value' =&gt; 'H') ))       );

 $form['field_a_name']['#states']   = $field_state;


The state does not work as expected, i believe it's caused by the same field name, most likely because of the jquery selector confused with the two fields with same name.

It works fine if the field name are different.

How to solve this?
In states you can use jQuery selectors. For example add form id to state selector:

$field_state = array(
  'visible' =&gt; array(
    '#form1 :input[name="field_a_name"]' =&gt; array(
      array('value' =&gt; 'H'),
    ),
  ),
);