convalida intervallo minimo di prezzo minimo non funzionante con jquery.validate.js

convalida modulo sto usando https://jqueryvalidation.org. Ho implementato le regole di convalida personalizzate tramite la proprietà dipende.convalida intervallo minimo di prezzo minimo non funzionante con jquery.validate.js

seguenti sono regole errore di convalida:

errore

se entrambi box prezzo non è selezionata non verrà visualizzato.
se una casella di prezzo (una su entrambe) selezionata, errore di convalida mostrerà che l'utente deve selezionare entrambi.
se entrambi sono selezionati, il valore di prezzo massimo deve essere maggiore del prezzo minimo.

si prega di seguito troverete il mio codice:

nel mio codice ogni condizione è soddisfacente, ma l'ultima regola significa prezzo max sarà sempre maggiore di prezzo minimo non funziona. Il suo controllo vero ma la convalida non si avvia.

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

qui è jsfiddle link

fonte

2016-05-20 Arka

DOH! ;) non importa ... cancellando in 5 minuti .. – dandavis

ciao, @Arka si prega di vedere il mio codice sta funzionando bene .. :) –

È possibile farlo utilizzando max e min regole. Ecco lo fiddle.

Codice:

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

fonte

2016-05-23 07:32:46 cassln

Per required regola è il metodo validateRequiredBoth() e per min e max è possibile configurare una regola che richiede un parametro, insieme a un depends callback.

Inoltre, modificare i campi selezionati e maxrange.

Ecco il codice:

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>

fonte

2016-05-26 15:43:03

Ciao @Arka, ha risposto alla tua domanda .. Potresti controllare? –

eseguito con successo con il vostro requisito consulta questo codice e jsfiddle:

Nota: non mi ha dimenticato di aggiungere file JS nella tua pagina

HTM Codice 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>

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

diretta Esempio jsfiddle: https://jsfiddle.net/rajnikpatel/4hnxhmrs/

fonte

2016-05-27 09:37:37

Per regola desiderata è il metodo CheckValidate (FormName) e per il min e max è possibile configurare una regola che richiede un parametro

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

fonte

2017-10-24 07:56:36

convalida intervallo minimo di prezzo minimo non funzionante con jquery.validate.js

risposta

Problemi correlati