Validate Dropdown without form tag

Question

We are Providing an option for user to select "Brand & Model" and click on "See cases" button , according to selected options, it will redirect to proper url.

Here if we click directly on "see cases" without Selecting Brand & Model, its redirecting to some wrong url, here we want to add validation for those 2 Dropdowns. We are not using any form tag here.

<div>

        <div>
          <select id="brand_select">
            <option value="">My Brand</option>
            <?php foreach ($brands as $key => $value) 
            {
            ?>
                 <option value="<?php echo $value->getCategoryId();?>"> <?php echo $value->getCategoryName();?></option>
            <?php 
            }
            ?>
          </select>
        </div>


        <div id="brandmodel">
          <select id="model_select">
            <option value="">My Model</option>
          </select>
        </div>        
        <div>


        <div>
            <a href="#" onclick="geturlandredirec()"><span> See Cases > </span> </a>
        </div>
      </div> 

      <div id="myDivLoader"></div>

      <script>
      var models = <?php echo json_encode($this->getbrandsArr()) ?>;
      jQuery(document).ready(function(){
        jQuery( "#brand_select" ).change(function() {
          var brandId = jQuery(this).val();      
           url="<?php echo Mage::getbaseUrl()?>custom-phone-cases/customcase/ajaxBrandmodel";
           new Ajax.Request(url, {
               method: 'POST',  

               onLoading: showLoad,
                 onFailure: function(response){
           },
          parameters: {
            id: brandId
          },
         onSuccess: function(response)
         { 
             jQuery( "#brandmodel" ).html(response.responseText);
             hideLoad();
         }
        }); 

       });      
    });
      function showLoad()
      {
       jQuery("#myDivLoader").html('<img src="<?php echo $this->getSkinUrl('images/opc-ajax-loader.gif') ?>" alt="Wait" />');
      }
      function hideLoad()
      {
       jQuery("#myDivLoader").html('');
      }
    function geturlandredirec()
    {           
      var brandmodelValue=jQuery( "#model_select option:selected" ).val();
      var finalUrl="custom-"+brandmodelValue+".html";
      jQuery('#customcaseform').attr('action',finalUrl);
      jQuery( "#customcaseform" ).submit();

       /* Trying this code for My Model Validation */
      var model_select = document.getElementById("model_select");
      if (model_select.value == "") 
      {
          document.getElementById('model_select').innerHTML="please select Model";
      }

    }
      </script>
</div>

Answer 1

Within the custom function geturlandredirec() you can check whether the dropdowns are having values or not and validate them manually with own code.

Like

function geturlandredirect()
{
    /* Trying this code for My Model Validation */

    if (jQuery('#brand_select').val() && jQuery('#model_select').val()) {
        var brandmodelValue=jQuery( "#model_select option:selected" ).val();
//var finalUrl="custom-"+brandmodelValue+".html";
        var finalUrl="http://sbdev2.kidsdial.com:81/custom-"+brandmodelValue+".html";
        jQuery('#customcaseform').attr('action',finalUrl);
        jQuery( "#customcaseform" ).submit();
    } else {
        if (jQuery('#brand_select').val()) {
            if (jQuery('#brandmodel').find('label.error').length) {
                jQuery('#brandmodel').find('label.error').html("Please select a model to proceed");
            } else {
                jQuery('#brandmodel').append('<label class="error">Please select a model to proceed</label>');
            }
        }
        if(jQuery('#model_select').val()) {
            if (jQuery('.custom_case').find('.brand').find('label.error').length) {
                jQuery('.custom_case').find('.brand').find('label.error').html("Please select a model to proceed");
            } else {
                jQuery('.custom_case').find('.brand').append('<label class="error">Please select a brand and then model to proceed</label>');
            }
        }
        else {
            if (jQuery('#brandmodel').find('label.error').length) {
                jQuery('#brandmodel').find('label.error').html("Please select a model to proceed");
            } else {
                jQuery('#brandmodel').append('<label class="error">Please select a model to proceed</label>');
            }

            if (jQuery('.custom_case').find('.brand').find('label.error').length) {
                jQuery('.custom_case').find('.brand').find('label.error').html("Please select a model to proceed");
            } else {
                jQuery('.custom_case').find('.brand').append('<label class="error">Please select a brand and then a model to proceed</label>');
            }
        }
        return false;
    }
}

On false you can return false else proceed to normal flow where you want it to redirect.

Answer 2

Add a value to default selected option like this <option value="-1">My Brand</option>

Then you have multiple options:

1. Add a file named custom--1.html as a sort of 404-Page

2. display allert/error/something when default value is detected inside geturlandredirec function:

   var brandmodelValue=jQuery( "#model_select option:selected" ).val();

   if(brandmodelValue == -1){ alert('Please select a brand first!'); return; }