如果表单经过验证，请删除提交按钮答案

【问题标题】：Remove Submit Button if the form is validated如果表单经过验证，请删除提交按钮
【发布时间】：2011-11-18 22:05:13
【问题描述】：

我正在使用 Magento 并创建了一个自定义表单，基本上我想要做的是防止多次单击提交按钮（无论是双击，还是用户只是不耐烦并单击按钮几秒钟后再次）。

表单使用 Magento Javascript 验证方法来验证字段，如果所有字段都经过验证，那么我想做的是在第一次单击时删除提交按钮并将其替换为“处理中.. 。“ 信息。这样用户就无法双击或多次单击按钮。

如果字段未全部通过验证，则向下移动提交按钮，在其上方显示一条消息，可能显示“请填写所有必填字段并再次提交表单”。

以下是仅包含验证的表单，但我真的很想知道如何应用我上面提到的内容。

任何帮助将不胜感激！！！提前致谢。

<form name="<em><strong>my-custom-form</strong>" id="my-custom-form" action="" method="post">

<label for="firstname">< ?php echo $this->__('First name') ?> <span class="required">*</span></label><br />
<input id="firstname" name="firstname" class="<em/><strong>input-text required-entry</strong>" />

<label for="lastname">< ?php echo $this->__('Last name') ?> <span class="required">*</span></label><br />
<input id="lastname" name="lastname" class="<em/><strong>input-text required-entry</strong>" />

<label for="useremail">< ?php echo $this->__('Email') ?> <span class="required">*</span></label><br />
<input type="text" name="useremail" id="useremail" class="<em/><strong>input-text required-entry validate-email</strong>" />

<input type="submit" name="submit" value="<?php echo $this-/>__('Submit') ?>" />

</form>< ?php /* END OF my-custom-form */?>

<script type="text/javascript">
 //< ![CDATA[
   var customForm = new VarienForm('<em><strong>my-custom-form</strong>');
 //]]>
</script>

【问题讨论】：

标签： javascript validation magento

【解决方案1】：

不确定 Magento 可能如何适应，因为我不太熟悉它，但该过程通常是这样的：

$('#my-custom-form').submit(function(){
    $('input[type=submit]', this).attr('disabled', true);

    // validate form

    if (valid) {
        return true;
    } else {
        $('input[type=submit]', this).attr('disabled', false);
        return false;
    }
});

【讨论】：

【解决方案2】：

您可以将 UI 阻塞视为一种可能的解决方案。我用this one.

如果您还没有使用 jQuery，您可以尝试隐藏提交按钮，而不是完全删除它。移除按钮可能会导致事件绑定出现问题，具体取决于您的设置方式。

这可能是您在没有更多代码/信息的情况下获得的最大帮助。

【讨论】：

【解决方案3】：

我没有在上面看到您的验证代码，但如果我们假设它是一个布尔函数，您可以：

if (validatation()) {
  $('#my-custom-form').submit(function(){
   $('input[type=submit]', this).attr('enabled', 'enabled');
   $('input[type=submit]', this).val('In process...');
  });
} else { 
  $('#my-custom-form').submit(function(){
    $('input[type=submit]', this).attr('disabled', 'disabled');
  });
}

我建议两件事：

1) 删除“处理中...”这件事，这只会让用户第二次遇到困难，除非您继续对每次更改进行验证（）并将文本设置回来。

2) 添加防止双击：

    $('my-custom-form').submit(function(){
       $('input[type=submit]', this).attr('disabled', 'disabled');
       $('select', this).attr('disabled', 'disabled');
       $('input[type=text]', this).attr('readonly', 'readonly');
       $('textarea', this).attr('readonly', 'readonly');
  });

【讨论】：