如果表單驗證失敗，重新啓用提交按鈕

我有一個表單，onsubmit（）驗證表單內容並隱藏提交按鈕並在處理時顯示圖像。如果表單驗證失敗，重新啓用提交按鈕

$(document).ready(function() 
{ 
    $('input[type="submit"]').click(function() 
    { 
     $(this).css('display', 'none'); 
     $('<img>').attr('src', '../images/ajax-loader.gif').insertAfter($(this)); 
    }); 
});

JS：

function validateForm() 
{ 
    var x=document.forms["trial"]["username"].value; 
    var splitted = x.match("^(.+)@abcd\.com$"); 
    if (splitted != null) 
    { 
     return true; 
    } 
    return false; 
}

HTML：

echo "<FORM name=\"trial\" action=\"index2.php\" method=\"POST\" onsubmit=\"return validateForm();\">"; 
echo "Access-Type: "; 
echo "<select name=\"accesstype\" id=\"accesstype\">"; 
echo "<option value=\"select\">-SELECT-</option>"; 
echo "<option value=\"adsl\">ADSL</option>"; 
echo "<option value=\"cable\">CABLE</option>"; 
echo "</select><br><br>"; 
echo "<span id=\"username\" class=\"details\">Username (e.g [email protected]) : <input id=\"username\" type=\"text\" name=\"username\" maxlength=\"40\"></span><br><br>";   
echo "<input type=\"submit\" name=\"submit\" value=\"submit\">"; 
echo "</FORM>";

它工作正常，到目前爲止，如果由用戶提供的所有信息符合要求。但是，如果表單驗證失敗，我希望提交按鈕重新出現，以便用戶能夠進行必要的更改並重新提交表單。

來源

2013-04-29 user2280769

在返回false前，在你的'validateForm（）'函數中重新啓用它。 – 2013-04-29 00:43:54

你爲什麼不只是不停的圖像隱藏和驗證功能 HTML的真/假結果顯示切換

<form name="trial" action="index2.php" method="POST" onsubmit="return validateForm(this);"> 
    Access-Type: <select name="accesstype" id="accesstype"> 
     <option value="select">-SELECT-</option> 
     <option value="adsl">ADSL</option> 
     <option value="cable">CABLE</option></select> 
     <br><br><span id="username" class="details">Username (e.g [email protected]) : <input id="username" type="text" name="username" maxlength="40"></span> 
     <br><br><input type="submit" name="submit" value="submit"> 
     <img id="image" src="image_url" style="display:none" /> 
</form>

function validateForm(form) 
{ 
    form.submit.style.display='none'; 
    form.image.style.display='block'; 
    var x=document.forms["trial"]["username"].value; 
    var splitted = x.match("^(.+)@abcd\.com$"); 
    if (splitted != null) 
    { 
     return true; 
    } 
    form.submit.style.display='block'; 
    form.image.style.display='none'; 
    return false; 
}

有是不需要使用另一個點擊handler使用jQuery，你也看不到t如果驗證失敗，他會更改（圖像切換），因爲驗證運行速度如此之快。只需檢查this demo。

來源

2013-04-29 01:04:20

這爲我做了詭計。謝謝大家:) – user2280769 2013-04-29 01:26:50

不客氣:-) – 2013-04-29 01:28:41

聲明：

var me;

乳寧文件準備：

$('input[type="submit"]').click(function() { 
    me = $(this); // !! no var 

    ...

然後，我們可以在任何地方訪問：

me.css('display', 'block');

其他解決辦法 - 匹配的驗證功能的具體元素：（無那麼需要me變量）

$("input[name='submit']").toggle(splited!=null);

來源

2013-04-29 00:44:35

是的，但'我'會超出範圍。 – Musa 2013-04-29 00:45:40

是的。它應該是一個全球變種。問題的第一個變體較短並且已經改變：/在回答 – 2013-04-29 00:47:00

之後，我只粘貼了validatform的一部分，它在同一個函數中有大約7或8個其他檢查。我應該使用me.css（'display'，'block'）;到處是它的返回假？ – user2280769 2013-04-29 00:48:33

試試這個：

function validateForm() 
{ 
    var x=document.forms["trial"]["username"].value; 
    var splitted = x.match("^(.+)@abcd\.com$"); 
    if (splitted != null) 
    { 
     $('[name=trial]').css('display', 'none'); 
     return true; 
    } 
    $('[name=trial]').css('display', 'block'); 
    return false; 

}

來源

2013-04-29 01:16:04 Viscocent

很多方法可以做到這一點，但我會盡量避免使用onclick事件。改爲使用onsubmit，這樣當用戶按Enter鍵時，它不會跳過您的處理程序。

$('form').submit(function(){ 
    // This portion will run when the user click on the submit button or press the `enter` key 
});

來源

2013-04-29 05:01:54

如果表單驗證失敗，重新啓用提交按鈕

回答

相關問題