jquery表單驗證

Question

我使用下面的代碼進行表單驗證。代碼工作正常。 下面是代碼：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> 
<script src="js/jquery.validate.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    jQuery(function(){ 
     jQuery("#type").validate({ 
      expression: "if (VAL != '0') return true; else return false;", 
      message: "Please make a selection" 
     }); 

     jQuery("#type2").validate({ 
      expression: "if (VAL != '0') return true; else return false;", 
      message: "Please make a selection" 
     }); 
    }); 
</script> 

代碼下拉框中：

<select name="type" id="type"> 
    <option value="0">Select an option</option> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
    <option value="3">Option 3</option> 
</select> 
<select name="type2" id="type2"> 
    <option value="0">Selet an option</option> 
    <option value="0">Select an option</option> 
    <option value="'1">Option 1</option> 
    <option value="'2">Option 2</option> 
    <option value="'3">Option 3</option> 
</select> 

現在我想的是在第二個下拉框中的驗證應該工作只有在第一個下拉框中選擇的項目是「選項2「，對於其他選定的選項，第二個組合框不會進行驗證。

jquery.validate.js：

(function (jQuery) { 
    var ValidationErrors = new Array(); 
    jQuery.fn.validate = function (options) { 
     options = jQuery.extend({ 
      expression: "return true;", 
      message: "", 
      error_class: "ValidationErrors", 
      error_field_class: "ErrorField", 
      live: true 
     }, options); 
     var SelfID = jQuery(this).attr("id"); 
     var unix_time = new Date(); 
     unix_time = parseInt(unix_time.getTime()/1000); 
     if (!jQuery(this).parents('form:first').attr("id")) { 
      jQuery(this).parents('form:first').attr("id", "Form_" + unix_time); 
     } 
     var FormID = jQuery(this).parents('form:first').attr("id"); 
     if (!((typeof (ValidationErrors[FormID]) == 'object') && (ValidationErrors[FormID] instanceof Array))) { 
      ValidationErrors[FormID] = new Array(); 
     } 
     if (options['live']) { 
      if (jQuery(this).find('input').length > 0) { 
       jQuery(this).find('input').bind('blur', function() { 
        if (validate_field("#" + SelfID, options)) { 
         if (options.callback_success) 
          options.callback_success(this); 
        } 
        else { 
         if (options.callback_failure) 
          options.callback_failure(this); 
        } 
       }); 
       jQuery(this).find('input').bind('focus keypress click', function() { 
        jQuery("#" + SelfID).next('.' + options['error_class']).remove(); 
        jQuery("#" + SelfID).removeClass(options['error_field_class']); 
       }); 
      } 
      else { 
       jQuery(this).bind('blur', function() { 
        validate_field(this); 
       }); 
       jQuery(this).bind('focus keypress', function() { 
        jQuery(this).next('.' + options['error_class']).fadeOut("fast", function() { 
         jQuery(this).remove(); 
        }); 
        jQuery(this).removeClass(options['error_field_class']); 
       }); 
      } 
     } 
     jQuery(this).parents("form").submit(function() { 
      if (validate_field('#' + SelfID)) 
       return true; 
      else 
       return false; 
     }); 
     function validate_field(id) { 
      var self = jQuery(id).attr("id"); 
      var expression = 'function Validate(){' + options['expression'].replace(/VAL/g, 'jQuery(\'#' + self + '\').val()') + '} Validate()'; 
      var validation_state = eval(expression); 
      if (!validation_state) { 
       if (jQuery(id).next('.' + options['error_class']).length == 0) { 
        jQuery(id).after('<span class="' + options['error_class'] + '">' + options['message'] + '</span>'); 


        jQuery(id).addClass(options['error_field_class']); 
       } 
       if (ValidationErrors[FormID].join("|").search(id) == -1) 
        ValidationErrors[FormID].push(id); 
       return false; 
      } 
      else { 
       for (var i = 0; i < ValidationErrors[FormID].length; i++) { 
        if (ValidationErrors[FormID][i] == id) 
         ValidationErrors[FormID].splice(i, 1); 
       } 
       return true; 
      } 
     } 
    }; 
    jQuery.fn.validated = function (callback) { 
     jQuery(this).each(function() { 
      if (this.tagName == "FORM") { 
       jQuery(this).submit(function() { 
        if (ValidationErrors[jQuery(this).attr("id")].length == 0) 
         callback(); 
        return false; 
       }); 
      } 
     }); 
    }; 
})(jQuery); 

任何想法？

Answer 1

終於讓我找到工作的建議我的問題的簡單解決方案。

那就是：

jQuery("#type2").validate({ 
expression: "if ((jQuery('#type1').val() == '2') && VAL == '0') return false; else return true;", 
      message: "Please make a selection" 
     }); 

Answer 2

你必須根據選擇選項

$('select.foo option:selected').val(); // get the value from a dropdown select 
$('select.foo').val(); 

http://api.jquery.com/val/

Answer 3

您可以爲此創建自定義規則的設定值的添加自定義功能。在這個自定義規則中，您必須檢查第二個下拉列表的值是否爲option2。如果是，則顯示該消息，否則顯示空消息。

您可以查看自定義規則創建的SO發佈jQuery Validate Plugin - How to create a simple custom rule?

Answer 4

我試圖在這篇文章中給出

Custom jQuery Validation .addMethod question

希望這會爲我