jQuery confirm button not in a popup confirm() dialog
<p>I have a long form that I am validating with the jQuery validate plugin. After the form validates, I want the submit button to change into a confirm button with an appropriate message above about checking the form for errors. This button, when clicked again, should submit the form for real this time as long as all the required fields are still filled in.
I have the following:</p>

<pre><code>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"});
    }
  });
});
</code></pre>

<p>...</p>

<pre><code>&lt;button type="submit" id="submit"&gt;Submit&lt;/button&gt;
</code></pre>

<p>It works to validate the form, then the button changes text, the the function fires (the alert has the name of the form in it) when clicked, but the form never submits for real.
Any help or ideas would be greatly appreciated.</p>

<p>Thanks</p>

<p>EDIT:
Ok, I think I have figured it out. I have the submit button hidden  and a button called Validate that just checks if the form is validated without submitting using <code>$("#someForm").valid();</code> If it checks out, I hide the "Submit" button and show the "Confirm" button along with a little message about checking your submission, etc. See below:</p>

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

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

<p>...</p>

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

<p>Works perfectly, and is a heck of a lot cleaner than my original code!</p>
