分鐘最大價格範圍驗證不與jquery.validate.js

Question

表單驗證我使用https://jqueryvalidation.org。 我已經通過depends屬性實現了自定義驗證規則。

以下是驗證錯誤規則：

• 如果沒有選擇這兩個價格盒子錯誤將不會顯示。

• 如果一個價格框（兩者中的一個）被選中，驗證錯誤將顯示用戶需要選擇兩者。

• 如果選擇了兩者，則最大價格值必須大於最小价格。

請在下面找到我的代碼：在我的代碼

每一個條件是令人滿意的，但最後的規則意味着最高價格總是低於最低價格時，不工作。它的檢查是正確的，但驗證不會觸發。

這裏是jsfiddle link

$(document).ready(function() { 
    $("#form1").validate({ 
     debug: true, 
     onkeyup: false, 
     onfocusout: false, 
     onclick: false, 
     rules: { 
      minrange: { 
       required: { 
        depends: function() { 
         var min_range = $("#min-range").find(':selected').val(), 
          max_range = $("#max-range").find(':selected').val(); 
         if (min_range == "" && max_range == "") { 
          return false; 
         } else if (min_range != "" && max_range == "") { 
          return true; 
         } else if (min_range == "" && max_range != "") { 
          return true; 
         } else if (parseInt(max_range) < parseInt(min_range)) { 
          return true; 
         } else { 
          return false; 
         } 
        } 
       } 
      }, 
      maxrange: { 
       required: { 
        depends: function() { 
         var min_range = $("#min-range").find(':selected').val(), 
          max_range = $("#max-range").find(':selected').val(); 
         if (min_range == "" && max_range == "") { 
          return false; 
         } else if (min_range != "" && max_range == "") { 
          return true; 
         } else if (min_range == "" && max_range != "") { 
          return true; 
         } else if (parseInt(max_range) < parseInt(min_range)) { 
          return true; 
         } else { 
          return false; 
         } 
        } 
       } 
      }, 
     }, 
     submitHandler: function(formName, event) { 
      alert("sucess"); 
     } 
    }); 
}); 

這裏是jsfiddle link

Answer 1

爲此，您可以通過使用max和min規則。這裏是fiddle。

代碼：

$(document).ready(function() { 
    var $min_range = $("#min-range"), 
     $max_range = $("#max-range"); 
$("#form1").validate({ 
    debug: true, 
    onkeyup: false, 
    onfocusout: false, 
    onclick: false, 
    rules: { 
     minrange: { 
     required: function() { 
      return !($min_range.val() === "" && $max_range.val() === ""); 
     }, 
     max: function() { 
      if ($max_range.val() !== "") { 
      return $max_range.val(); 
      } 
     } 
     }, 
     maxrange: { 
     required: function() { 
      return !($min_range.val() === "" && $max_range.val() === ""); 
     }, 
     min: function() { 
      if ($min_range.val() !== "") { 
      return $min_range.val(); 
      } 
     } 
     } 
    }, 
    submitHandler: function(formName, event) { 
     alert("sucess"); 
    } 
    }); 
}); 

Answer 2

對於required規則是法validateRequiredBoth()和min和max可以配置需要一個參數，一個depends回調沿規則。

還修改了選擇字段minrange和maxrange。

下面是代碼：

var $min = $('#min-range'), 
 
    $max = $('#max-range'); 
 

 
function getNumber(num) { 
 
    var intNum = parseInt(num); 
 
    return !isNaN(intNum) ? intNum : 0; 
 
} 
 

 
function getMin() { 
 
    return getNumber($min.find('option:selected').val()); 
 
} 
 

 
function getMax() { 
 
    return getNumber($max.find('option:selected').val()); 
 
} 
 

 
function validateRequiredBoth() { 
 
    return !(getMin() === 0 && getMax() === 0); 
 
} 
 

 
$('#form1').validate({ 
 
    debug: true, 
 
    onkeyup: false, 
 
    onfocusout: false, 
 
    onclick: false, 
 
    rules: { 
 
     minrange: { 
 
      required: function() { 
 
       return validateRequiredBoth(); 
 
      }, 
 
      max: { 
 
       param: function() { 
 
        return getMax(); 
 
       }, 
 
       depends: function() { 
 
        return getMax() > 0 && getMin() > getMax(); 
 
       } 
 
      } 
 
     }, 
 
     maxrange: { 
 
      required: function() { 
 
       return validateRequiredBoth(); 
 
      }, 
 
      min: { 
 
       param: function() { 
 
        return getMin(); 
 
       }, 
 
       depends: function() { 
 
        return getMin() > getMax(); 
 
       } 
 
      } 
 
     } 
 
    }, 
 
    submitHandler: function(formName, event) { 
 
     alert('sucess'); 
 
    } 
 
});

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script> 
 
<form id="form1" name="form1"> 
 
    Min price: 
 
    <select class="form-control form-control-all" id="min-range"name="minrange"> 
 
     <option value="">Min</option> 
 
     <option value="10000">$10,000</option> 
 
     <option value="20000">$20,000</option> 
 
     <option value="50000">$50,000</option> 
 
     <option value="75000">$75,000</option> 
 
     <option value="100000">$100,000</option> 
 
     <option value="125000">$125,000</option> 
 
     <option value="150000">$150,000</option> 
 
     <option value="175000">$175,000</option> 
 
     <option value="200000">$200,000</option> 
 
     <option value="300000">$300,000</option> 
 
     <option value="500000">$500,000</option> 
 
     <option value="750000">$750,000</option> 
 
     <option value="1000000">$1M</option> 
 
     <option value="1500000">$1.5M</option> 
 
     <option value="2000000">$2M</option> 
 
     <option value="2500000">$2.5M</option> 
 
     <option value="3000000">$3M</option> 
 
     <option value="3500000">$3.5M</option> 
 
     <option value="4000000">$4M</option> 
 
     <option value="4500000">$4.5M</option> 
 
     <option value="5000000">$5M</option> 
 
     <option value="10000000">$10M+</option> 
 
    </select> 
 
    <br/> 
 
    Max price: 
 
    <select class="form-control form-control-all" id="max-range" name="maxrange"> 
 
     <option value="">Max</option> 
 
     <option value="10000">$10,000</option> 
 
     <option value="20000">$20,000</option> 
 
     <option value="50000">$50,000</option> 
 
     <option value="75000">$75,000</option> 
 
     <option value="100000">$100,000</option> 
 
     <option value="125000">$125,000</option> 
 
     <option value="150000">$150,000</option> 
 
     <option value="175000">$175,000</option> 
 
     <option value="200000">$200,000</option> 
 
     <option value="300000">$300,000</option> 
 
     <option value="500000">$500,000</option> 
 
     <option value="750000">$750,000</option> 
 
     <option value="1000000">$1M</option> 
 
     <option value="1500000">$1.5M</option> 
 
     <option value="2000000">$2M</option> 
 
     <option value="2500000">$2.5M</option> 
 
     <option value="3000000">$3M</option> 
 
     <option value="3500000">$3.5M</option> 
 
     <option value="4000000">$4M</option> 
 
     <option value="4500000">$4.5M</option> 
 
     <option value="5000000">$5M</option> 
 
     <option value="10000000">$10M+</option> 
 
    </select> 
 
    <br/> 
 
    <input type="submit"> 
 
</form>

Answer 3

成功地與您的要求運行，請參閱該代碼和的jsfiddle：

注：不要忘了加JS文件在你的網頁

HTM L碼：

<form id="form1" name="form1"> 
      Min price: 
      <select class="form-control form-control-all" id="min-range" data-name="Price Range Min" name="minrange" title="Min price is required" aria-required="true"> 
       <option value="">Min</option> 
       <option value="10000">$10,000</option> 
       <option value="20000">$20,000</option> 
       <option value="50000">$50,000</option> 
       <option value="75000">$75,000</option> 
       <option value="100000">$100,000</option> 
       <option value="125000">$125,000</option> 
       <option value="150000">$150,000</option> 
       <option value="175000">$175,000</option> 
       <option value="200000">$200,000</option> 
       <option value="300000">$300,000</option> 
       <option value="500000">$500,000</option> 
       <option value="750000">$750,000</option> 
       <option value="1000000">$1M</option> 
       <option value="1500000">$1.5M</option> 
       <option value="2000000">$2M</option> 
       <option value="2500000">$2.5M</option> 
       <option value="3000000">$3M</option> 
       <option value="3500000">$3.5M</option> 
       <option value="4000000">$4M</option> 
       <option value="4500000">$4.5M</option> 
       <option value="5000000">$5M</option> 
       <option value="10000000">$10M+</option> 
      </select> 


      <br /> Max price: 

      <select class="form-control form-control-all" id="max-range" data-name="Price Range Max" name="maxrange" title="Max price is required" aria-required="true"> 
       <option value="">Max</option> 
       <option value="10000">$10,000</option> 
       <option value="20000">$20,000</option> 
       <option value="50000">$50,000</option> 
       <option value="75000">$75,000</option> 
       <option value="100000">$100,000</option> 
       <option value="125000">$125,000</option> 
       <option value="150000">$150,000</option> 
       <option value="175000">$175,000</option> 
       <option value="200000">$200,000</option> 
       <option value="300000">$300,000</option> 
       <option value="500000">$500,000</option> 
       <option value="750000">$750,000</option> 
       <option value="1000000">$1M</option> 
       <option value="1500000">$1.5M</option> 
       <option value="2000000">$2M</option> 
       <option value="2500000">$2.5M</option> 
       <option value="3000000">$3M</option> 
       <option value="3500000">$3.5M</option> 
       <option value="4000000">$4M</option> 
       <option value="4500000">$4.5M</option> 
       <option value="5000000">$5M</option> 
       <option value="10000000">$10M+</option> 
      </select> 
      <br /> 
      <input type="submit"> 
     </form> 

JS代碼：

var $min = $('#min-range'), 
    $max = $('#max-range'); 

function getNumber(num) { 
    var intNum = parseInt(num); 
    return !isNaN(intNum) ? intNum : 0; 
} 

function getMin() { 
    return getNumber($min.find('option:selected').val()); 
} 

function getMax() { 
    return getNumber($max.find('option:selected').val()); 
} 

function validateRequiredBoth() { 
    if (getMin() == "" && getMax() == "") { 
     return true; 
    } else if (getMin() == "" && getMax() != "") { 
     return true; 
    } else if (getMin() != "" && getMax() == "") { 
     return true; 
    } else { 
     return false; 
    } 
} 

$('#form1').validate({ 
    debug: true, 
    onkeyup: false, 
    onfocusout: false, 
    onclick: false, 
    rules: { 
     minrange: { 
      required: function() { 
       return validateRequiredBoth(); 
      }, 
      max: { 
       param: function() { 
        return getMax(); 
       }, 
       depends: function() { 
        return getMax() > 0 && getMin() > getMax(); 
       } 
      } 
     }, 
     maxrange: { 
      required: function() { 
       return validateRequiredBoth(); 
      }, 
      min: { 
       param: function() { 
        return getMin(); 
       }, 
       depends: function() { 
        return getMin() > getMax(); 
       } 
      } 
     } 
    }, 
    submitHandler: function (formName, event) { 
     alert('sucess'); 
    } 
}); 

直播的jsfiddle實施例：https://jsfiddle.net/rajnikpatel/4hnxhmrs/

Answer 4

有關所需的規則是該方法CheckValidate（窗體名稱）和用於最小和最大可以配置需要參數的規則

function CheckValidate(FormName) { 
    try{ 
     //if (!flag) 
     // return false; 
     var flag2 = true; 
     $('#' + FormName + ' input[data-minlength][data-maxlength]').each(function() { 
      var x = this.id; 
      var dataminlength = this.attributes['data-minlength'].value; 
      var datamaxlength = this.attributes['data-maxlength'].value; 
      if (this.value.length < dataminlength || this.value.length > datamaxlength) { 
       $('#' + x).css("background-color", "#f8e8e8").css("border", "1px solid red"); 
       $('#lblValidationSummary').append('حداقل و حداکثر تعداد کاراکتر مجاز برای ' + this.attributes['placeholder'].value + ' باید بین ' + dataminlength + ' تا ' + datamaxlength + ' باشد' + '<br/>'); 
       flag = false; 
       flag2 = false; 
      } 
      else { 
       $('#' + x).css("background-color", "#fff").css("border", "1px solid gray"); 
      } 
     }); 
     //if (!flag) 
     // return false; 

     return flag; 
    } 
    catch(err) 
    { 
     alert(err); 
     return false; 
    } 
}