Question

我有一个表单，其中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 john.smith@abcd.com) : <input id=\"username\" type=\"text\" name=\"username\" maxlength=\"40\"></span><br><br>";        
echo "<input type=\"submit\" name=\"submit\" value=\"submit\">";
echo "</FORM>";

如果用户提供的所有细节都符合要求，它到目前为止工作正常。但是，如果表单验证失败，我希望重新显示提交按钮，以便用户能够进行必要的更改并重新提交表单。

Answer 1

声明：

var me;

准备好文件：

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

  ...

然后我们可以随时随地访问：

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

其他解决方案 - 在验证功能中匹配具体元素：（不需要me变量）

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

Answer 2

为什么不隐藏图像并在验证功能的真/假结果上切换显示的 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 john.smith@abcd.com) : <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>

<强> JS

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，如果验证失败，您也无法看到更改（图像切换），因为验证运行速度非常快。只需查看this demo。

Answer 3

试试这个：

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;

}

Answer 4

有很多方法可以做到这一点，但我会避免使用onclick事件。请改用onsubmit，以便当用户按Enter键时，它不会跳过您的处理程序。

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

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

4 个答案: