javascript - 验证没有表单标签的下拉菜单

Question

我们提供了一个选项供用户选择“品牌和型号”，然后点击“查看案例”按钮，根据所选选项，它将重定向到正确的网址。

在这里，如果我们直接点击“查看案例”而不选择品牌和型号，它会重定向到一些错误的网址，这里我们要为这两个下拉菜单添加验证。我们在这里没有使用任何表单标签。

<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

在自定义函数geturlandredirec()中，您可以检查下拉列表是否有值，并使用自己的代码手动验证它们。

喜欢

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;
    }
}

如果为 false，您可以返回 false，否则继续到您希望重定向的正常流程。