мин. Максимальный диапазон цен валидация не работает с jquery.validate.js

форма проверки я использую https://jqueryvalidation.org. Я внедрил пользовательские правила валидации через свойство зависимости.мин. Максимальный диапазон цен валидация не работает с jquery.validate.js

следующие правила проверки ошибок:

если обе коробки цена не выбрана ошибка не будет показывать.
Если выбрана одна коробка цены (одна из обеих), ошибка проверки покажет, что пользователю необходимо выбрать оба варианта.
Если оба выбраны, то максимальное значение цены должно быть больше минимальной цены.

пожалуйста, найти ниже мой код:

в моем коде каждое условие удовлетворительно, но последнее правило означает, что максимальная цена будет всегда больше, чем минимальная цена не работает. Его проверка верна, но проверка не запускается.

здесь 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

источник

2016-05-20 Arka

DOH! ;) Не обращайте внимания ... удаление за 5 минут .. – dandavis

привет, @Arka, пожалуйста, посмотрите мой код, он отлично работает .. :) –

Вы можете сделать это с помощью 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"); 
    } 
    }); 
});

источник

2016-05-23 07:32:46 cassln

Для 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>

источник

2016-05-26 15:43:03

Привет @Arka, ответил на ваш вопрос .. Не могли бы вы проверить? –

успешно работать с вашим требованием смотрите этот код и 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/

источник

2016-05-27 09:37:37

Для требуемого правила является метод CheckValidate (FormName) и мин и макс можно настроить правило, для которого требуется параметр

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

источник

2017-10-24 07:56:36

мин. Максимальный диапазон цен валидация не работает с jquery.validate.js

ответ

Смежные вопросы