title: How to validate form created in bootbox message?
body: <p>I am using <a href="http://bootboxjs.com/" rel="nofollow noreferrer">bootbox.js</a>. It allows user to create a form in it's 'message' part. But, I'd like to do some validation using jquery <strong>before</strong> I click submit button.</p>
  
  <p>This is the bootbox:</p>
  
  <pre><code>bootbox.confirm({
     title    : "Choose Item:",
     message  : 
              "&lt;?php 
                  echo "&lt;form id='f_item'&gt;";
                  echo "&lt;h3&gt;Item: &lt;/h3&gt;&lt;br/&gt;";
                  foreach($item as $row_item){
                      echo "&lt;input type='checkbox' name='item' class='cek_item' value='".$row_pic-&gt;item."' /&gt;";
                  }
                  echo "&lt;/form&gt;";
              ?&gt;",
   buttons    : {
                  cancel  : { label: '&lt;i class="fa fa-times"&gt;&lt;/i&gt; Batal' },
                  confirm : { label: '&lt;i class="fa fa-check"&gt;&lt;/i&gt; OK'}
              },
   callback: function (result) {
                  //If OK button is pressed
                  if(result == true){
                     /*SENT FORM CODE*/
                  }
              }
          });
  </code></pre>
  
  <p>Without adding some validation form submit is working. But, I do not know where to put the validation script.</p>
  
  <p>This is a test script<br>
  <code>$(".cek_item").on('change',function(event){ alert($(this).val()+" is choosen"); });</code><br>
  where do I should put this script?</p>
  
  <p>THe validation I'd like to do is:</p>
  
  <ul>
  <li>If first item is first checked, the rest of the item is cannot be
  checked.</li>
  <li>If not the first item is first checked, then user cannot check the
  first item.</li>
  </ul>