Remove error message of a particular field using jquery validate

jquery validate ignore
remove the validation message after filling the input field.
jquery-validate errorplacement
javascript validation error message not removed after field is valid
jquery validation clear error on field
jquery validate add rules and message dynamically
jquery validation message
jquery remove validation from element

I have a simple form that looks like below. I have clicked the Submit button once and all the jquery validation messages appear (as shown in red). However, upon unchecking the Call checkbox for Sports Event, I would like to remove all jquery validate messages associated to the Sports Event only. How can I do that? Currently, if I check the Call checkbox again, the validation messages are still shown.

Please see the codes below:

 //if call checkbox is checked, display the phoneNo and attendeesNo field
    function toggleCall(){
        if (document.getElementById("callCheckbox").checked == true) {
            document.getElementById('phoneNo').style.display = "";
            document.getElementById('attendeesNo').style.display = "";
        } else {
            document.getElementById('phoneNo').style.display = "none";
            document.getElementById('attendeesNo').style.display = "none";
        }
    }

HTML Code:

<tr>
    <td>
        <input type="checkbox" name="callCheckbox" id="callCheckbox" value="true" onclick="toggleCall()" />
    </td>
    <td>
        <input type="checkbox" name="emailCheckbox" id="emailCheckbox" value="true" onclick="toggleEmail()" />
    </td>
    <td> Sports Event 
        <br>
        <div id="sportsEvent" style="display:none;">
            <label> Enter a phone number: </label>
            <input type="text" name="phoneNo" id="phoneNo">
            <br>
            <label> No. of attendees: </label>
            <input type="text" name="attendeesNo" id="attendeesNo">
        </div>
    </td>
</tr>

jquery validation method

<script type="text/javascript">
    //jquery validation Script
    var _global_validator = null;

    $(document).ready(
        function() {
            $("#submitForm").validate( {
                rules: {
                    phoneNo: {
                        required: function (element) {
                                if($("#callCheckbox").is(':checked')){
                                        var e = document.getElementById("phoneNo");
                                        if(e.value==""){
                                            return true;  
                                        }
                                        else{
                                            return false;
                                        } 
                                }
                                else{
                                    return false;
                                }    
                            } 
                      },
                      attendeesNo: {
                        required: function (element) {
                                if($("#callCheckbox").is(':checked')){
                                    var e = document.getElementById("attendeesNo");
                                    if(e.value==""){
                                        return true;  
                                    }
                                    else{
                                        return false;
                                    } 
                                }
                                else {
                                    return false;
                                }  
                        } 
                      },

                    errorElement : "small",

                    invalidHandler : function(e, validator) {
                        _global_validator = validator;
                        //renderDropdownUIValidation(validator);
                        renderCheckableUIValidation(validator);
                    },

                    errorPlacement : function(error, element) {
                        error.insertAfter(element);
                    },

                    messages : {
                        phoneNo: {
                                required: '<Please enter phone number>',
                        },
                        attendeesNo: {
                                required: '<Please enter no. of attendees>',
                        },
                    },

                    submitHandler: function(form) {
                            form.submit();
                    }
                }

            }); //end validate
        });

    </script>


You've show absolutely no code whatsoever, so I cannot write a custom solution for your question. I don't even know your validation rules controlling the form. Does clicking the checkbox already change the rules for the text boxes? In other words, does the validation of the text fields depend on the checkbox? Have you written that code at least?

You probably also need to write a change handler function on the checkbox that programmatically forces re-validation of the text field. This assumes that all validation rules are satisfied when the checkbox is un-checked.

$('#yourform').validate({  // <- plugin initialization
    // rules, options, etc.
});

$('#your_checkbox').on('change', function() {
    $('#your_textfield').valid(); // <- force re-validation
});

Otherwise, please post an MCVE so the question can be meaningfully answered.


EDIT:

After OP posted code, it's clear that conditional rules are all that's needed. When the conditional rules are properly declared, the messages will automatically show/hide... there is no need for special code.

There are several other issues...

  1. You've put all of the .validate() method options within the rules object. The rules object is a sibling of the other options. Validation is entirely broken by this.

  2. You cannot put a < or a > within the custom error messages as this is interpreted as an HTML element. Use &lt; and &gt; instead, which are then rendered as < and >.

  3. Something is breaking your invalidHandler option. Fix or remove it.

  4. Remove the inline JavaScript click handlers and replace with jQuery handler functions. You're using jQuery, which renders all inline JavaScript completely obsolete. It's also easier to troubleshoot JavaScript when it's not randomly mixed into your HTML markup.

  5. Remove the getElementById that is within the jQuery code and replace with standard jQuery selectors. Again, you're using jQuery, which normalizes element selection across browsers. document.getElementById('my_element') can simply be replaced with jQuery's id selector, $('#my_element').

  6. Within .validate() rules it makes absolutely no sense to conditionally apply required to a field only when the field itself is empty. If the field is required, then it cannot be left empty in the first place. In your case, required simply needs to be made conditional based on the checkbox.

This demo will point you in the right direction. Click the first checkbox to see the text elements. The error messages will automatically show/hide based on user input thanks to the plugin itself.

http://jsfiddle.net/4v0j181L/

How to clear jQuery validation error messages?, resetForm();//remove error class on name elements and clear history If you specified the errorClass , call that class to hide instead error (the values, and hits "Submit," it should flag some of the fields with errors. If you want just clear validation labels you can use code from jquery.validate.js resetForm() In this way, client side form validation can vastly improve the user experience. This article will explain some basics about form validation and then illustrate how to validate form fields using jQuery. Use JavaScript Validation to improve UX. There are two types of validation: client side validation and server side validation.


$(document).ready(function () {
})   // inside this you need to write 

1. ## If drop down list ##
$('#serviceType').on('change', function () {
            if ($('#serviceType').text() != '') {
                $('#Error-ServiceType').hide();
            }
        });

2. ## If text box ##
$('#rateperhr').on('keyup keypress change', function () {
            if ($('#rateperhr').val() != '') {
                $('#Err_rateperhour').hide();
            }
        });

[jQuery] How to remove error messages from Validation Plugin , defaults to "This field is required." The error message shows up in a label.. How in the world do I hide those error messages within those labels  Remove the getElementById that is within the jQuery code and replace with standard jQuery selectors. Again, you're using jQuery, which normalizes element selection across browsers. document.getElementById ('my_element') can simply be replaced with jQuery's id selector, $ ('#my_element'). Within .validate () rules it makes absolutely no sense to conditionally apply required to a field only when the field itself is empty.


$(.your_form_class_name).validate().resetForm();

Reference documentation, That way an email field is optional unless required is specified. Whenever you have multiple fields with the same rules and messages, refactoring An error message displays a hint for the user about invalid elements, and what is wrong. In this tutorial, you will learn how to use a jQuery plugin to add form validation to your website. Using a jQuery plugin to validate forms serves a lot of purposes.


Documentation, You need to place error messages in the DOM and show and hide them when appropriate. This particular one is one of the oldest jQuery plugins (started in July 2006) <input id="cname" name="name" minlength="2" type="text" required​>. This tutorial shows you how to set up a basic form validation with jQuery, demonstrated by a registration form. We’re going to use the jQuery Validation Plugin to validate our form. The basic


Form Validation Using Jquery Examples, will be able to be warned of the incorrect input and be given hints of the kind of data that is acceptable. The above markup is for a simple form with four fields and a submit button. This removes any element with the error class from the documents. Don't remove the jQuery script tag as the plugin depends on jQuery. Using a library to do form validation can save lots of your development time. Being a tested and proven library guarantees it. jQuery Form validation libra


Easy Form Validation With jQuery, HTML5 Form Input Validation Using Only HTML5 and Regex Monty custom error messages and adding conditional logic to form validation. The conditions for validity can also be added, removed or modified at any time with ease. All form elements with that particular selector will be ignored by the  You can trigger the blur event on the form elements that you need re-validation after they are populated. $( "#target" ).blur(); // ~~~~http://api.jquery.com/blur/ If the validation of the new elements is successful it will clear all errors, if something needs attention they'll receive new error messages.