如果表单验证失败，重新启用提交按钮

我有一个表单，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

如果表单验证失败，重新启用提交按钮

回答

相关问题