CODEWITHSUNDEEP
javascriptjqueryformsvalidation
user7200423
user7200423

Reputation:

jQuery form validation. How to prevent error messages appearing multiple times

I'm trying to validate a form in jQuery. I have it working, with 1 issue. If i click the submit button twice, the error messages will show twice, stacked on top of eachother.

EG

Name must not be empty

Name must not be empty

//Form Validation

//Store checkbox, and checkbox label in jQuery object
 $terms = $('#terms');
 $termsdoc = $('#terms-doc');

//Check if pet name is empty
if($name.val() == '')
{
    $name.after('<p class="error">Name must not be empty</p>')
}


if($terms.is(':not(:checked)'))
{
    $termsdoc.after('<p class="error">Please agree to the terms and conditions</p>')
}

Upvotes: 0

Views: 1439

Answers (2)

njc
njc

Reputation: 13

You could also disable the submit button in the handler. $(".submit").prop("disabled",true); This would prevent duplicate submissions.

Upvotes: 0

Pineda
Pineda

Reputation: 7593

Using .last() just adds the desired content as the last child of the target selection, so what you're seeing is a duplicate element being added.

SOLUTION:

You could target <p> tags with the class "error" and remove them before you add them with .last():

$("p.error").remove();

Upvotes: 1

Related Questions