Custom php form validation

Question

I have a PHP form with different types of input fields (textbox, radio, checkbox,..) for which I used jQuery. It works fine for all input types except one of the question in my form for which the selected items(movies) by user are stored in an array. I think the image can explain better than me:

As can be seen in the image, selected movies by user are moved to the selected list(an array), while in jQuery validation, input names are "required" and therefore in this case only the value inserted in the textbox (in this case:"frozen") will be stored in database.

This is the code:

<form id="form2" action="page3.php" method="post">

<fieldset id = "q27"> <legend class="Q27"></legend>
<label class="question"> What are your favourite movies?<span>*</span></label>
<div class="fieldset content"> 
<p>
<div class="movienames">    
 <div class="field">
      <Input type = 'radio' id="selectType" Name ='source' value= 'byTitle'>By title
      <Input type = 'radio' id="selectType" Name ='source' value= 'byActor'>By actor
      <Input type = 'radio' id="selectType" Name ='source' value= 'byDirector'>By director
 </div>

 <div id="m_scents" class="field">
   <label style="margin-bottom:10px;" for="m_scnts"></label>
    <p>
     <input class="autofill4" type="textbox" name= "q27[]" id="q" placeholder="Enter movie, actor or director name here" />
     <input type="button" value="search" id="btnSearch" />
    </p>
 <div>    
</div>

 <div id="basket">
   <div id="basket_left">
       <h4>Selected Movies</h4>
       <img id="basket_img" src="http://brettrutecky.com/wp-content/uploads/2014/08/11.png" />
   </div>
   <div id="basket_right">
       <div id="basket_content">
          <span style="font-style:italic">Your list is empty</span>
       </div>
   </div>
</div>        
</p>
</div>
</fieldset>

<script type="text/javascript">    
var master_basket = new Array();
selectedMovies = {};
var selected;
var selectedVal;
var selectedDir;        
$(document).ready(function () {
      $("input[id='selectType']").change(function(){
               $("#q").val('');
               if ($(this).val() == "byTitle") {
                   //SOME LINES OF CODE....
                     .....
                } else     
                  if ($(this).val() == "byActor"){
                    // SOME LINES OF CODE

                } else 
                  if ($(this).val() == "byDirector"){  
                  //SOME LINES OF CODE
                }             
           }); 

$('#btnSearch').on('click', function (e) {           
           window.textbox = $('#q').val();
           window.searchType = $('input:radio[name=source]:checked').val();

           popupCenter("movielist.php","_blank","400","400");
  });    

});     

    function addToBasket(item) {
       master_basket.push(item);
       showBasketObjects();
    }

    function showBasketObjects() {
       $("#basket_content").empty();
       $.each(master_basket, function(k,v) {
             var name_and_year = v.movie_name;          

             $("#basket_content").append("<div class='item_list'>" + v.movie_name + "<a class='remove_link' href='" + name_and_year + "'><img width='20' src='http://i61.tinypic.com/4n9tt.png'></a></div>");
       });
 }
 </script>

 // CODE RELATED TO OTHER QUESTIONS IN THE FORM....
 //......... 
 <input class="mainForm" type="submit" name="continue" value="Save and Continue" />  

 </form>

<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
 $(document).ready(function() {
   $('#form2').validate({       
        rules: {
           "q27[]": {
                required: true,
            },
           //OTHER REQUIRED QUESTIONS....
        },
               errorPlacement: function(error, element) {      
           if (element.attr("type") == "radio" || element.attr("type") == "checkbox" || element.attr("name") == "q12[]") {
              error.insertAfter($(element).parents('div').prev($('question')));
           } else {
             error.insertAfter(element);             
        }
       }

    }); 
});
</script>

QUESTION:

I have two problems with my code:

1. When I click on "Save and continue" button to submit this page of the form, for the mentioned question (the one you could see in the image), only the value inserted in the textbox will be stored in database while I need all selected movies in the list will be stored in separate rows in DB.

2. The textbox for this question is a hidden field that will be appeared only if user select one of the radio button values. So, if user just ignore this question and doesn't select one of radio button values, then he can simply submit this page and continue without any error message.

I would like to know if there is a way to customize jQuery validation so that I don't let users to submit this page until they didn't answer the mentioned question?? and then, how could I store the selected items by user in Database instead of textbox value?

All ideas would be highly appreciated,

Answer 1

To submit the basket movie items you can add a hidden input field. You would get something like this:

$("#basket_content").append("<div class='item_list'>" + v.movie_name + "<a class='remove_link' href='" + name_and_year + "'><img width='20' src='http://i61.tinypic.com/4n9tt.png'></a></div>");
$("#basket_content").append("<div type='hidden' name='basket_movie[]' value='"+v.movie_name+"' />");

Using this, there will be an array like $_POST['basket_movie'] which contains the movie names of the movies in the basket.

If you want to prevent submitting, when the input box isn't filled you just add an action listener on form submit and count the item_list items. If it's 0 then don't submit. Add something like this to prevent form submitting when there are no items added to the basket:

    $(document).on('submit', '#form2',function(e)
    {
        if($('.item_list').length == 0)
        {
            e.preventDefault();
        }
    });