2016-07-23 131 views
0

提交表單輸出警報內容我目前已經被用於警報包含窗體和隱藏的驗證DIV這就是一個頁​​面:動態修改與jQuery

<body> 
    <form id="1"> 
     <input id="2"> 
     <button id="submitButton" type="button">Submit</button> 
    </form> 


    <div id="alert"> 
     <span>Input is empty!</span> 
    </div> 

</body> 

在網頁加載時,警報DIV是隱藏與CSS:

#alert{ 
    display: none; 
} 

有一個JS驗證文件,用於檢查提交時輸入是否爲空。這個JS文件不能改變。

如果點擊提交按鈕時輸入的標籤是空的,JS將執行一個簡單的jQuery show()功能,使股利將是對用戶可見:

if(isEmptyField){ 
    $('#alert').show(); 
} 

現在,我不能修改「輸入是空!」字符串,但是,我想將警報消息更改爲「空輸入!」。

如何創建一個jQuery事件來實現這一目標?所以當我點擊提交按鈕時,我會看到「空輸入!」而不是「輸入是空的!」?

回答

0

如果您可以修改原來的JS文件,只需更改行這樣:

$('#submitButton').click(function() { 
    if (isEmptyField) { 
     $('#alert span').text("Empty input!").show(); 
    } 
}); 

否則,您可以更改跨度的文本文檔時加載:

$(document).ready(function() { 
    $('#alert span').text("Empty input!"); 
}); 
+0

將這項工作?已經有一個JS文件做到這一點。這會覆蓋當前的嗎? – OPK

+0

@JasonZ如果你可以編輯原始的js文件,然後用它替換它。確保「isEmptyField」變量仍然有效。否則使用第二個例子。 – Polyov

0

可以使用提交表單

例如fiddle

jQuery;

$("form").submit(function(event) { 
    if ($("input").val() == "") { 
    $("span").text("Input is empty!").show(); 
    return false; 
    } 

    $("span").text("Thanks").show().fadeOut(2000); 
    event.preventDefault(); 
}); 

標記

<body> 
    <form id="1"> 
     <input id="2"> 
     <button id="submitButton" type="submit">Submit</button> 
    </form> 
    <div id="alert"> 
     <span></span> 
    </div> 
</body> 

你不需要#alert CSS了