javascript 表单验证不会阻止 css .submitted 采取行动

Question

我有一个 class="myfrm" 的表单，其中包含一个由输入字段组成的字段集。在 fieldset 标签之后，我有一个 div 标签并分配了 class="ack-msg" ，其中包含一条确认消息。

在 CSS 中我有

.myfrm.submitted fieldset {
    display: none;
}
.myfrm.submitted .ack-msg {
    display: block;
}

提交表单时，字段集被确认替换。 当表单按预期完成时，这可以正常工作，但当表单验证失败时会显示一条消息，但确认 class="ack-msg" 会启动并替换字段集，就好像它通过了一样。

验证由表单上的 onSubmit 调用的 javascript 函数执行。下面列出了 javascript，为了简单起见，我有一个简短的脚本版本，只有在提供的参数值 = 24 时才通过验证。

function validateForm(v) 
{
  if(v.value != '24')
  { 
    alert("Oops! Try agan!");
    return false;
  } else { 
    return true;
  }
}

另外，如果我在验证失败后检查页面并且确认得到显示，则表单声明已更新 class="我的-frm" 至 class="my-frm 提交"

如果我应该列出其他详细信息，请告诉我。

欢迎对此提供任何帮助。

提前致谢， 内德

Answer 1

尝试在警报之后立即使用 javascript 删除 submitted 类。 如果你有 jQuery：

function validateForm(v) 
{
    if(v.value != '24')
    { 
        alert("Oops! Try agan!");
        $.(".my-frm").removeClass("submitted");
        return false;
    } else { 
        return true;
    }
}