驗證3個與jQuery

表單字段我有一個形式，我想申請驗證，以：驗證3個與jQuery

<form id="calculator"> 

      <div class="f-field"> 
       <label for="sale-price">Sale Price</label> 
       <input id="sale-price" type="text" value=""/> 
      </div> 

      <div class="f-field"> 
       <label for="agent-commission">Highstreet agent commission</label> 
       <input id="agent-commission" type="text" value=""/> 
      </div> 

      <div class="f-field"> 
       <label for="sale-time">Estimated sale time</label> 
       <input id="sale-time" type="text" value=""/> 
      </div> 

      <div class="f-field"> 
       <input type="button" value="Calculate" id="calc-button"/> 
      </div> 

     </form>

我的jQuery至今：

$(document).ready(function(){ 

     $('#calc-button').click(function(){ 

      var answer = 

      parseInt($('#sale-price').val())/
      parseInt($('#agent-commission').val()) + 
      parseInt($('#sale-time').val()); 

      var validate= false; 
      $("#calculator input[type='text']").each(function(){ 
       if($(this).val() != '' || $(this).attr('checked')) 
        validate = true; 
      }); 
      if(!validate){ 
       alert('Please select at least one filter'); 
       return false; 
      } 
      else { 
       $('#calc-val').html('£' + answer); 
      } 

     }); 
    });

有一種簡單的方法來設置驗證上這3個字段將只有數字值。我想驗證一個號碼的存在，所以任何不是數字或者什麼都沒有的東西都會發出一條消息。

我真的想避免完整的jQuery插件，因爲我確信有這樣一個小窗體的方法，但是我正在尋找這方面的建議。

編輯在我的jQuery中添加，試圖在下面提到的評論者的接受率上工作。對不起，不要早點做。

來源

2012-12-06 Doidgey

這樣做，ive上傳我的jQuery到目前爲止。 – Doidgey

這裏是一個工作FIDDLE

這將刪除任何東西，不是一個數字，而用戶正在輸入...

$("#sale-price, #agent-commission, #sale-time").on("keyup keypress keydown blur input change", function() { 

    // Remove All Non Numbers 
    $(this).val($(this).val().replace(/[^0-9]/gi, "")); 

});

然後檢查以確保數值不是空的，請登錄。

$('#calculator').on('submit', function(e) { 
    e.preventDefault(); 

    if (($('#sale-price').val() && $('#agent-commission').val() && $('#sale-time').val()) != '') { 
     $(this).submit(); 
    } 
    else { 
     alert('Please Fill In All Fields'); 
    } 
});

來源

2012-12-06 17:40:48 VIDesignz

謝謝，這個作品完美。我也很欣賞小提琴！ – Doidgey

有一個問題，即時打印一個值，如果你看看我頂部的jQuery。當沒有輸入數值時，我得到NaN，我可以禁用它嗎？ – Doidgey

@ Mat-visual當然！你想要它成爲什麼？ – VIDesignz

當然，只需將處理程序綁定到提交事件，並阻止提交表單，除非值符合您的要求。

事情是這樣的：

$('#calculator').on('submit', function(e) { 
    e.preventDefault(); 

    if (isNumber($('#sale-price').val()) && isNumber($('#agent-commission').val()) && isNumber($('#sale-time').val())) { 
     $(this).submit(); 
    } 
    else { 
     // errors in form 
    } 
}); 

// from http://stackoverflow.com/a/1830844/551093 
function isNumber(n) { 
    return !isNaN(parseFloat(n)) && isFinite(n); 
}

來源

2012-12-06 17:36:42

驗證3個與jQuery

回答

相關問題