Question

I have a form that I’m submitting through AJAX. The form includes many fields, but the two I’m having trouble with are “emailaddress” and “confirmemailaddress”. I’d like it if the form could only be submitted if the these two fields are identical. The caveat is that these two forms are also not required. So if they are both blank, they should be able to submit just fine.

Here’s the code I am working with thus far. I’ve removed a lot of the visual effects that happen during and after the form submits to keep it clean.

$(function() {

  $("#contact_form form").submit(function() {
    var thistarget = this.target;

    $("#contact_form form").validate({
    rules: {
        emailaddress: "required",
        confirmemailaddress: {
        equalTo: "#emailaddress"
           }
         }
    });
   return false;  

  $.ajax({  

      type: this.method, 
      url: this.action,  
      data: $(this).serialize(), 

      success: function() {  
        alert ("success:");

        $('#contact_form').html("<div id='message'></div>");  
        $('#message').html("<h2>Request Form Submitted!</h2>")  
        .append("<p>We will be in touch soon.</p>")  
        .hide()  
        .fadeIn(1500, function() {  
          $('#message').append("Thank you!");  
        }); 

      }


    });

   return false;  

  });
});

Answer 1

Just delete: emailaddress: “required”, if you have that rule you won’t be able to submit the form unless you input an email address.