1

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

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

4

4 回答 4

0

尝试这个：

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-29T01:16:04.830 回答
0

为什么不隐藏图像并在验证功能 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;
}

无需再次单击handlerusing jQuery，如果验证失败，您也看不到更改（图像切换），因为验证运行速度如此之快。只需检查此演示。

于 2013-04-29T01:04:20.683 回答
0

宣言：

var me;

运行文件准备好：

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

  ...

然后我们可以在任何地方访问：

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

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

$("input[name='submit']").toggle(splited!=null);
于 2013-04-29T00:44:35.713 回答
0

有很多方法可以做到这一点，但我会避免使用该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-29T05:01:54.703 回答