1

我有一个很长的表格，我正在使用 jQuery 验证插件进行验证。表单验证后，我希望提交按钮更改为确认按钮，上面带有关于检查表单错误的适当消息。再次单击此按钮时，只要仍然填写所有必填字段，这次应该提交表单。我有以下内容：

var confirmed = function(){
  alert($("#someForm").attr("name")); //just to see the function fire...
  $("#someForm").submit();  
  return true;
}

$(document).ready(function(){
  $("#someForm").validate({
    submitHandler: function(form){
      var oldBtn = $("#submit");
      var newBtn = oldBtn.clone();
      newBtn.click(confirmed)
      newBtn.text("Confirm");
      newBtn.insertBefore(oldBtn);
      oldBtn.remove();
      newBtn.attr({"id": "submit"});
    }
  });
});

...

<button type="submit" id="submit">Submit</button>

它可以验证表单，然后按钮更改文本，单击时触发函数（警报中有表单的名称），但表单永远不会真正提交。任何帮助或想法将不胜感激。

谢谢

编辑：好的，我想我已经弄清楚了。我隐藏了提交按钮和一个名为 Validate 的按钮，它只检查表单是否经过验证而不使用$("#someForm").valid();如果它签出，我隐藏了“提交”按钮并显示“确认”按钮以及一条关于检查提交的小消息等。见下文：

$(document).ready(function(){
  $("#submitBtn").hide();
  $("#confMessage").hide();
  $("#someForm").validate();
});

var checkValid = function(){
  var isValid = $("#volunteer").valid();
  if(isValid){
    $("#validBtn").remove();
    $("#submitBtn").show();
    $("#confMessage").show();
  }
}

...

<p id="confMessage">Please review your submission.</p>    
<p><button id="validBtn" onclick="checkValid()">Validate</button>    
<button type="submit" id="submitBtn">Submit</button></p>

完美运行，比我的原始代码干净得多！

4

2 回答 2

0

删除 oldBtn.remove();然后它会工作。

于 2013-03-13T03:39:15.583 回答
0

你有

  var oldBtn = $("#submit");
  var newBtn = oldBtn.clone();

上面的行所做的是DOM在 html 中添加相同的内容，以便也ID将复制该意思。
并且每个 ID 必须是唯一的DOM。
尝试为克隆重写IDDOM并尝试。

和

newBtn.click(confirmed)

此代码意味着您将事件分配给newBtn不调用click事件。

对于调用click事件使用.trigger()

于 2013-03-13T03:54:25.803 回答