Remove error message of a particular field using jquery validate

Question

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>

form

Where is your relevant code? See: stackoverflow.com/help/mcve — Sparky
– Sparky, Commented Jun 27, 2015 at 18:27

Community · Accepted Answer · 2017-05-23 12:15:38Z

2

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...

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.
You cannot put a < or a > within the custom error messages as this is interpreted as an HTML element. Use < and > instead, which are then rendered as < and >.
Something is breaking your invalidHandler option. Fix or remove it.
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.
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. 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/

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Jun 27, 2015 at 18:32

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

8 Comments

ah gal Over a year ago

Hi @Sparky. I have edited the post above by adding in my codes. I just want to clear the validation error messages when people uncheck and then check again the #callCheckbox. Thank you.

Sparky Over a year ago

@ahgal, no, that's not an accurate description of what you need to do. You just need to properly apply "conditional rules"... then the validation plugin will automatically toggle the error messages.

Sparky Over a year ago

@ahgal, see my edited answer, which identifies some key issues with your code.

ah gal Over a year ago

saw your demo. actually what i want is when i uncheck and check again the CallCheckbox, the error messages disappear. something like resetting the response since i restart the action (by unchecking the CallCheckbox) again

Sparky Over a year ago

@ahgal, I've already given you all the pieces... it's simply up to you to assemble them as per your project. Once the rule is no longer in effect (by unchecking the box), you can force re-validation by using the .valid() method on the text boxes as I've shown in the first part of my answer. I'm sorry I could not simply give you all the code in a finished package, but your example code had so many mistakes that needed fixing first.

|

Ramya Prakash Rout · Accepted Answer · 2019-02-28 18:14:58Z

1

$(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();
            }
        });

answered Feb 28, 2019 at 18:14

Ramya Prakash Rout

1412 silver badges5 bronze badges

1 Comment

tshimkus Over a year ago

Can you add some explanation for your answer? How does this code answer the question?

B2K · Accepted Answer · 2024-02-28 15:14:44Z

0

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

edited Feb 28, 2024 at 15:14

B2K

2,6211 gold badge24 silver badges35 bronze badges

answered Jan 31, 2019 at 4:18

reinerGeist

133 bronze badges

Collectives™ on Stack Overflow

Remove error message of a particular field using jquery validate

3 Answers 3

8 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related