jQuery Validation: How to take down the check marks after the form is submitted (ajax submission)?

I ha开发者_运维技巧ve a form (for editing existing info) whose submission is done in ajax via jQuery's $.post(). Prior to the submission, jQuery Validation kicks in to make sure the values that got changed are valid and generate a check mark beside each valid one.

My problem is that the check marks don't go away after submission. I tried the validator method, resetForm(), which took down the check marks but having the undesirable side-effect of reverting all changed inputs back to their old values.

Is there a way to only remove the check marks?

Is there a way to update the original values memorized by resetForm()? If so, then I could use resetForm() to achieve my purpose without the undesirable side-effect.

Please help. Thank you all.

Clarification: When I say "check mark" it's not the same as checkbox. As a matter of fact, my question has nothing to do with checkbox. To see what I am referring to as check mark, go to here and type in some valid string into one of the text inputs.

Those "check marks" in the demo you linked to are the result off CSS styling, after the class "checked" was added to the <label> within the <td class="status">, when the associated input was considered valid. A class is added to the label, which gives it a checkmark background.

Anyways, to trigger some behavior when the form is submitted, use the submitHandler. Example:

$('form').validate({
    // Your config here...
    submitHandler: function() {
        $('label').removeClass('checked');
    }
});

It's all customized in that demo, so you'll have to do what works with your setup and options.

You can do this through jQuery.

$('input[type="checkbox"]:checked').removeAttr('checked')

Ah, I may have misunderstood your question. Just find the class for those check marks and set them to display:none or visibility:hidden.

One option would be to grab the form values after validation but before submission and repopulate after submit.

var backup = $('#form-id').serializeArray();
$('#form-id').resetForm();

//
// submit logic
//

$.each(backup, function(key, value) {
   $('[name="' + key + '"]').val(value);
});

Yep, just like input text fields have element.defaultValue, checkboxes have checkboxObject.defaultChecked which is a bool value and can easily be applied with JQuery using the attr() function. The prop() function is recommended for properties such as "checked", "disabled", "selected", etc., but you check the box with

$('#mybox').prop('checked'); 

For a form reset function you'd probably rather use something like

$(':checkbox').each(function(){
    $(this).attr('checked',$(this).defaultChecked);
});

http://www.w3schools.com/jsref/prop_checkbox_defaultchecked.asp