jquery validation & clearing error messages

Question

I have a form with 3 fields to be input, first name, last name, and email address.

The elements are all similar to this one that I've got for the email address:

<dl>
  <dt>
    <label for="Email_Address">Email Address</label>
  </dt>
  <dd style="float:right">
     <input type="text" id="Email_Address" class="required  email" name="Email_Address" />
     <br>
     <span class="form_error" id="email_error">
       <span id="email_msg"></span>
     </span>
   </dd>
</dl>

The span below it, class "form_error" is where I'm displaying any validation errors. The validation code all works fine, checking for a valid email address, etc. Then I thought I would throw in an AJAX validation where I can check to see if that email address was already on file, and if it is, display a message too. That all is fine. The problem is if someone enters a email address that is already on file, and they get the message "email is already on file". Then they go to change the email address in the form, and I get the validation error, but I can't seem to figure out how to clear out the "already on file" message. I've tried using empty(), replaceWith(), and a few others, but it doesn't seem to work.

Here is the validation code, with the AJAX call. I'm sure it's something simple, but I'm not quite an expert in all of this yet.

$(document).ready(function(){
  $("#LegalVita_Sign_Up").validate({
    submitHandler: function(form) {
      var isDup = false;

      $.ajax({
        url: 'dup_email.php',
        data: { email: $('#Email_Address').val() },
        async: false, 
        success: function(msg) { 
          isDup = msg === "1" ? true : false 
        },
      });         

      if (isDup) {
        error = 'duplicate email address: ' + $('#Email_Address').val();
        $('#email_msg').replaceWith(error);
        return false;
      } else {
        form.submit();
        return true;
      }
    },
    messages: {
      First_Name: " First name required",
      Last_Name: " Last name required",
      Email_Address: {
        required: " email required",
        email: " email must be of the format: '[email protected]'"
      }
    },
    errorPlacement: function(error, element) {
      if (element.attr("name") == "First_Name" )
        error.insertBefore("#first_msg");
      else if (element.attr("name") == "Last_Name" )
        error.insertBefore("#last_msg");
      else if (element.attr("name") == "Email_Address" ) {
        error.insertBefore("#email_msg");
      } else
        error.insertAfter(element);
},
  });  
});

Bruno Silva · Accepted Answer · 2012-09-07 22:47:00Z

1

Your problem is not related to jQuery Validate. Set $('#email_msg').text('') at the beginning of your submit handler.

answered Sep 7, 2012 at 22:47

Bruno Silva

3,09720 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

abbaroo Over a year ago

That doesn't quite do it, as the validation fails, so the submit handler doesn't appear to get called. Instead, I get the new validation error inserted before the old "duplicate email" message. Like this: email requiredduplicate email address: [email protected]

Bruno Silva Over a year ago

The call to $.ajax is asynchronous. You need to check for is_dup and submit the form in the success handler and not outside it. if (msg === "1") { form.submit(); } else { <show error message> }

abbaroo Over a year ago

That helped. I also needed to put $('#email_msg').text('') at the beginning of the errorPlacement and then it works great. Thank you for the help.

Bruno Silva Over a year ago

If my answer helped, be sure to accept it as it the right one.

Collectives™ on Stack Overflow

jquery validation & clearing error messages

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related