min max fiyat aralığı doğrulama jquery.validate.js

Question

form doğrulama ile çalışıyorum https://jqueryvalidation.org kullanarak kullanıyorum. İsteğe bağlı özellik aracılığıyla özel doğrulama kurallarını uygularım.

hem fiyat kutusu seçilmemiş

• eğer hata gösterilmez: Aşağıdaki

  doğrulama hatası kurallardır.

• Bir fiyat kutusu (her ikisinden biri) seçildiğinde, doğrulama hatası kullanıcının her ikisini de seçmesi gerektiğini gösterir. Her ikisi de seçildiyse, maksimum fiyat değeri minimum fiyattan büyük olmalıdır.

kodumu aşağıda bulabilirsiniz: benim kod

her koşul tatmin edici ama son kural maksimum fiyat dk fiyatından daha her zaman daha büyük çalışmıyor olacağı anlamına gelir. Kontrol gerçek ama doğrulama tetiklemiyor.

burada burada 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"); 
     } 
    }); 
}); 

olduğunu max ve min kurallarını kullanarak jsfiddle link

Answer 1

Bunu yapabilirsin olduğunu. İşte fiddle.

Kodu: required kural için

$(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

yöntem validateRequiredBoth() ve min ve için max bir depends geri arama ile birlikte bir parametre gerektiren bir kural yapılandırabilirsiniz. Ayrıca, minrange ve maxrange alanlarını da değiştirerek seçin.

Not: unuttum eklemek yok JS dosyaları Başarıyla şartı ile çalıştırmak

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

bu kodu ve jsfiddle bakın: Burada

kodudur Sayfanızda

HTM içinde L Kodu:

<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 Kod:

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

Canlı jsfiddle Örnek: https://jsfiddle.net/rajnikpatel/4hnxhmrs/ gerekli kural için

Answer 4

yöntem CheckValidate (FormName) ve min ve max için yapılandırabilirsiniz olduğunu bir parametre gerektiren bir kural

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