2014-11-17 187 views
0

想要使用JavaScript驗證工作,當我點擊提交按鈕。現在發生的事情是,即使我輸入值低的值提交。但我需要檢查驗證之前,我點擊提交...JavaScript驗證提交按鈕

這是JavaScript:

$(function() { 
    $("#newMonoReading").on('focusout', function() { 
     var str = ""; 

     var initialMonoReading = $('#InitialMonoReading').val(); 
     var newMonoReading = $('#newMonoReading').val() 
     if (~~newMonoReading < ~~initialMonoReading) { 
      $('#MonoErrorMessage').text("New Mono Readings must be MORE than existing"); 
      $('#MonoErrorMessage').show(); 
     } else { 
      $('#MonoErrorMessage').hide(); 
     } 
    }); 
}); 

現在我的表格上,你可以看到輸入類型(提交)

<div class="modal-footer"> 
<input type="submit" value="Submit New Readings" class="btn btn-primary"> 

<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
</div> 
</fieldset> 
</form> 

我如何獲得提交按鈕的JavaScript函數,所以當我輸入提交它不會工作,因爲我輸入了一個較低的值。

+0

使用按鈕而不是提交 – Edrich

+0

@Edrich:如果你想提交一個'form',使用提交按鈕。 – Amberlamps

+0

@Amberlamps你可以使用jQuery提交按鈕。 – Edrich

回答

1
function validateForm() { 
    var str = ""; 

    var initialMonoReading = $('#InitialMonoReading').val(); 
    var newMonoReading = $('#newMonoReading').val(); 
    if (~~newMonoReading < ~~initialMonoReading) { 
     $('#MonoErrorMessage').text("New Mono Readings must be MORE than existing"); 
     $('#MonoErrorMessage').show(); 
     return false; 
    } else { 
     $('#MonoErrorMessage').hide(); 
    } 
} 

這個例子將清除的東西 FIDDLE

<form onsubmit="return validateForm()" method="post"> 
    <div class="modal-footer"> 
    <input type="submit" value="Submit New Readings" class="btn btn-primary"> 

    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
    </div> 
    </fieldset> 
    </form> 
+0

複製和粘貼並不會幫助某人理解,讓某人幫助你解決問題的關鍵在於理解手中的問題並學習如何解決問題,而不是隻是複製/粘貼。大量的免費源代碼。 – NewToJS

+0

我想要的是,當我點擊提交閱讀必須高於現有閱讀。此刻,如果它降低它仍然提交的形式,但我不想要要發生,我想javascript錯誤顯示,如果價值較低,當我點擊提交按鈕 –

+0

@NewToJS我認爲這是相當簡單的理解..anyway更新我的答案,使其更清晰.. –

0

您實際上並不想驗證submit按鈕,因爲還有其他方式可以提交表單。您實際上需要驗證表單的onsubmit處理程序。

現在,這就是說,你沒有顯示足夠的代碼來知道問題出在哪裏,但我可以很好地猜測。

這一行之前:

$("#newMonoReading").on('focusout', function() { 

加入這一行:

alert($("#newMonoReading").length); 

有你想的DOM已經呈現之前運行這段代碼的好機會。如果返回0,你有三種選擇:

  • 使用事件代表團(矯枉過正在這種情況下)
  • 移動一個$(function() {...});
  • 負載中的代碼腳本在頁面的底部。
+0

我想要的是,當我點擊提交時,讀數必須高於現有讀數。目前,如果它的下面它仍然提交表單,但我不希望發生這種情況,我希望javascript錯誤顯示,如果價值較低,當我點擊提交按鈕 –

+0

我有一個輕微的哎呀,我的意思是'onsubmit'' - 不是'submit'。固定。如果用戶使用'submit'按鈕,或者按下ENTER鍵提交表單,那麼仍會觸發。 –

+0

這使情況變得更糟,當我點擊按鈕時,出現警告(1)。然後當我點擊提交它不工作,並在代碼中出錯。我只是不想用戶繼續,直到消息已經消失 –

0

更改提交按鈕按鈕 這樣,你將有提交全面控制。您可以在validate()功能執行自己的邏輯和決定是否允許表單提交或者不

<input type="button" onclick="validate()" value="Submit New Readings" class="btn btn-primary"> 

和你的驗證功能將

function validate() { 
    var initialMonoReading = $('#InitialMonoReading').val(); 
    var newMonoReading = $('#newMonoReading').val() 
    if (~~newMonoReading < ~~initialMonoReading) 
    { 
    alert("Value is not valid"); 
    return; 
    } 
    ///else submit 
    $("yourform").submit(); 
});