Question

我正在使用JQ和CSS来验证表单，并且与一些JS一起我隐藏了表单的一部分，直到用户点击继续。但是，我无法将样式应用于表单

中的“继续”或“立即加入”按钮

您可以在此处查看我的示例example1

当您单击“继续”时，表单的第二部分会出现，然后您可以单击“加入”，表单验证过程就会启动。但是，最后面的“立即加入”按钮是应该的样式em>应用于我的按钮，但不是（我无法理解为什么，我已经尝试了我能想到的一切）

所以，我决定不使用CSS来设置按钮样式，而是使用翻转图像。这适用于按钮的样式，但是当我尝试提交表单时，不会执行验证

你可以在这里看到example2

任何人都可以解决我如何完成1或2（即通过验证设置按钮或翻转图像）
非常感谢

Answer 1

由于它是HTML5，请尝试使用<button></button>而不是链接

<button style="width:90px;height:31px;border:0;" onmouseover="MM_swapImage('Image3','','joinnowro.jpg',1)" onmouseout="MM_swapImgRestore()" onclick="submit()" href="#"><img style="width:90px;height:31px;" id="Image3" name="Image3" src="http://www.secklow.com/form/joinnow.jpg" style="width: 90px; height: 31px;"></button>

几乎看起来不错 - 不知道为什么左边有一点按钮

直接html：

永远不要致电任何提交
如果使用脚本提交，则不会调用onsubmit事件处理程序

所以

function submitForm(){
  if (validate(document.register)) document.register.submit()
  return false;
}

和

<a href="#" onclick="return submitForm()"

Answer 2

例如1 ...

1）从form.asp中删除#register .formbutton1声明 2）从formstyle.css中删除#register fieldset input声明
3）将以下内容添加到formstyle.css

input.formbutton1  {
    background:#2c2a29; 
    color:#fff; 
    font-size:16px; 
    line-height:25px;
    padding:0px 0px 0px 0px; 
    display:inline-block; 
    margin-top:0px;
}

input.formbutton1:hover {background:#C68DB6;}

如上所示，您已在多个位置指定了按钮的行为。当我清除它们并将其添加到formstyle.css时，它可以正常工作。

使用翻转图像提交表单时，我的验证将被忽略

2 个答案: