最小価格帯の検証がjquery.validate.jsで動作しない

Question

フォームの検証私はhttps://jqueryvalidation.orgを使用しています。 私はカスタムプロパティを使ってカスタムバリデーションルールを実装しました。

両方の価格ボックスが選択されていない

• 場合、エラーが表示されません。次

  は、検証エラールールです。

• 1つの価格ボックス（両方のうち1つ）が選択されている場合、両方とも選択する必要があることを確認エラーが表示されます。

• 両方が選択されている場合、最大価格値は最小価格より大きくなければなりません。

私のコードの下に見つけてください：私のコードで

を、すべての条件が満足ですが、最後のルールが最高価格は最小価格よりも常に大きいが動作していないことを意味します。真であるが検証はトリガーではありません。

は、ここでは、ここで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"); 
     } 
    }); 
}); 

でmaxとminルールを使用してjsfiddle link

Answer 1

あなたがこれを行うことができます。ここにはfiddleがあります。

コード：requiredルールの

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

がメソッドvalidateRequiredBoth()で、minとmaxのためにあなたがdependsコールバックと一緒に、パラメータを必要とするルールを設定することができます。

また、選択フィールドminrangeおよびmaxrangeも変更されました。ここで

コードです：

注：は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() { 
 
    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を参照してください。あなたのページで

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（フォーム名）で、minとmaxのためにあなたが設定することができますパラメータを必要とする規則

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