爲最小和最大屬性避免範圍錯誤＆強制提交表格

Question

我創建了一個表格，其中有2個input type=number。這兩個輸入都必須填寫下面的數字，在min和max屬性中給出的範圍之間或之外，前提是該屬性可能包含或不包含十進制數。如果數目將低於min範圍則文本顏色會變成ORANGE，如果是上述的max範圍它會變成RED並且如果在輸入值的數量相匹配的範圍內它會變成GREEN，所有這些驗證將通過jQuery完成。

ISSUE這裏是我需要提交myForm但由於min & max屬性我得到這個提示「值必須小於或等於20」或「值必須大於或等於10」爲提交的輸入分別小於或大於min和max屬性中提供的範圍，因此我的表單未提交。 任何人都可以告訴我，我可能會出錯，或有任何解決方案相同。

鏈接代碼： JSFIDDLE

或

請檢查下面片段：

$(document).ready(function() 
 
{ 
 
    $("#weight").keyup(function() 
 
    { 
 
     var max = parseInt($('#weight').attr('max')); 
 
     var min = parseInt($('#weight').attr('min')); 
 
     if ($("#weight").val() >= min) 
 
     { 
 
      if ($("#weight").val() <= max) 
 
      { 
 
       $("#weight").css("color", "green"); 
 
      } 
 
      else 
 
      { 
 
       $("#weight").css("color", "red"); 
 
      } 
 
     } 
 
     else 
 
     { 
 
      $("#weight").css("color", "orange"); 
 
     } 
 
    }); 
 
}); 
 

 

 

 

 
$(document).ready(function() 
 
{ 
 
    $("#bmi").keyup(function() 
 
    { 
 
     var max = parseInt($('#bmi').attr('max')); 
 
     var min = parseInt($('#bmi').attr('min')); 
 
     if ($("#bmi").val() >= min) 
 
     { 
 
      if ($("#bmi").val() <= max) 
 
      { 
 
       $("#bmi").css("color", "green"); 
 
      } 
 
      else 
 
      { 
 
       $("#bmi").css("color", "red"); 
 
      } 
 
     } 
 
     else 
 
     { 
 
      $("#bmi").css("color", "orange"); 
 
     } 
 
    }); 
 
}); 
 

 
$(document).ready(function() 
 
{ 
 
    $('input').on('keypress', function(e) 
 
    { 
 
     if (e.which == 13) 
 
     { 
 
      switch ($(this).attr('id')) 
 
      { 
 
       case 'weight': 
 
       $('#bmi').focus(); 
 
       e.preventDefault(); 
 
       break; 
 

 
       case 'bmi': 
 
       $('#body_fat').focus(); 
 
       e.preventDefault(); 
 
       break; 
 

 
       case 'body_fat': 
 
       $('#submit').focus(); 
 
       e.preventDefault(); 
 
       break; 
 
      } 
 
     } 
 
    }); 
 
});

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button 
 
{ 
 
    -webkit-appearance: none; 
 
    margin: 0; 
 
} 
 
.newdatatext 
 
{ 
 
\t height:60px; 
 
\t width:100%; 
 
\t text-align:center; 
 
\t font-weight:bold; 
 
\t font-size:300%; 
 
} 
 
#usernewdetailsform 
 
{ 
 
\t margin-top:6%; 
 
width:100%; 
 
} 
 
#usernewdetailsform label 
 
{ 
 
    font-weight:bold; 
 
\t font-size:30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 

 
<form name="myForm" action="" method="POST"> 
 
    <label for="weight">Weight :</label> 
 
    <input type="number" name="weight" id="weight" class="newdatatext" placeholder="Weight" min="10" max="20" step=".01" autofocus required> 
 

 
    <label for="bmi">BMI</label> 
 
    <input type="number" name="bmi" placeholder="BMI" min="10" max="20" id="bmi" step=".01" class="newdatatext" required> 
 
    <input type="submit" name="submit" id="submit"> 
 
</form>

Answer 1

的min和max一個瀏覽器使用ttributes來執行表單驗證。如果你想用它們來確定jQuery的行爲，而是要跳過表單提交的瀏覽器阻止由於無效的值，將其存儲爲data-屬性和使用jQuery的.attr()或.data()方法，如閱讀：

var max = parseInt($('#weight').attr('data-max')); 

...或：

var max = parseInt($('#weight').data('max')); 

此外，看着你的代碼，我意識到你是：

1. 使用多個DOM準備回調。你只需要一個，你可以把所有的邏輯放在裏面。
2. 重複爲多個輸入元素重複相同的邏輯。您始終可以利用事件的上下文，使用$(this)來引用已觸發它的jQuery對象。
3. 包含難以閱讀的嵌套條件語句。您可以使用guard子句分別分配顏色，例如：

根據您的邏輯保護條款的例子：

var val = $(this).val(); 

if (val < min) { 
    $(this).css('color', 'orange'); 
    return; 
} 

if (val > max) { 
    $(this).css('color', 'red'); 
    return; 
} 

$(this).css('color', 'green'); 

---

這裏是一個更新的例子：

$(document).ready(function() 
 
{ 
 
    $("#weight, #bmi").keyup(function() 
 
    { 
 
     // Cache DOM node, min/max values, and input value 
 
     var $t = $(this); 
 
     var max = parseInt($t.attr('data-max')); 
 
     var min = parseInt($t.attr('data-min')); 
 
     var val = $t.val(); 
 
     
 
     // Use guard clauses 
 
     if (val < min) { 
 
      $t.css('color', 'orange'); 
 
      return; 
 
     } 
 
     
 
     if (val > max) { 
 
      $t.css('color', 'red'); 
 
      return; 
 
     } 
 
     
 
     $t.css('color', 'green'); 
 
    }); 
 

 
    $('input').on('keypress', function(e) 
 
    { 
 
     if (e.which == 13) 
 
     { 
 
      switch ($(this).attr('id')) 
 
      { 
 
       case 'weight': 
 
       $('#bmi').focus(); 
 
       e.preventDefault(); 
 
       break; 
 

 
       case 'bmi': 
 
       $('#body_fat').focus(); 
 
       e.preventDefault(); 
 
       break; 
 

 
       case 'body_fat': 
 
       $('#submit').focus(); 
 
       e.preventDefault(); 
 
       break; 
 
      } 
 
     } 
 
    }); 
 
});

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button 
 
{ 
 
    -webkit-appearance: none; 
 
    margin: 0; 
 
} 
 
.newdatatext 
 
{ 
 
\t height:60px; 
 
\t width:100%; 
 
\t text-align:center; 
 
\t font-weight:bold; 
 
\t font-size:300%; 
 
} 
 
#usernewdetailsform 
 
{ 
 
\t margin-top:6%; 
 
width:100%; 
 
} 
 
#usernewdetailsform label 
 
{ 
 
    font-weight:bold; 
 
\t font-size:30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 

 
<form name="myForm" action="" method="POST"> 
 
    <label for="weight">Weight :</label> 
 
    <input type="number" name="weight" id="weight" class="newdatatext" placeholder="Weight" data-min="10" data-max="20" step=".01" autofocus required> 
 

 
    <label for="bmi">BMI</label> 
 
    <input type="number" name="bmi" placeholder="BMI" data-min="10" data-max="20" id="bmi" step=".01" class="newdatatext" required> 
 
    <input type="submit" name="submit" id="submit"> 
 
</form>

Answer 2

你不能如果輸入值爲fie，則提交表單lds將不在該範圍內。 在你的情況，你可以在HTML

min="10" 

改變

data-min="10" 

等。而在JS：

var max = parseInt($('#weight').attr('data-min')); 

Answer 3

您可以使用數據-min和數據屬性的最大跳過驗證錯誤，並在上面的代碼中沒有指定操作URL。所以可能是這種形式的bcoz沒有提交。