jQuery Validate plugin - Disable error message on certain fields

Question

I'm looking to disable the error message just for specific input fields on a form.

In this example i'm trying to disable the messege just for the radio input field.

jQuery(document).ready(function($) {
  "use strict";

  $("form").validate();

  $('input[type="radio"]').validate({
    errorPlacement: function(error, element) {
      return false;
    }
  });
  
  $(document.body).on('click', '.submiter', function () {
		$("input").valid();
	});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>


<form>
  <fieldset>
    <p>
      <label for="title-Mr">Mr</label>
      <input id="title-Mr" type="radio" name="title" value="MR" class="required">
    </p>
    <p>
      <label for="bading">Bading</label>
      <input id="bading" type="text" name="bading" class="required">
    </p>
  </fieldset>
  <p>
    <a class="submiter" href="#submit">submit</a>
  </p>


</form>

dim · Accepted Answer · 2017-02-17 17:27:14Z

I figured it out by adding if statement to the errorPlacement function.

jQuery(document).ready(function($) {
  "use strict";

  $("form").validate({
    errorPlacement: function(error, element) {
      if (element.is(":radio")) {
        return false;
      } else {
        error.insertAfter(element);
      }
    }

  });


  $(document.body).on('click', '.submiter', function() {
    $("input").valid();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>


<form>
  <fieldset>
    <p>
      <label for="title-Mr">Mr</label>
      <input id="title-Mr" type="radio" name="title" value="MR" class="required">
    </p>
    <p>
      <label for="bading">Bading</label>
      <input id="bading" type="text" name="bading" class="required">
    </p>
  </fieldset>
  <p>
    <a class="submiter" href="#submit">submit</a>
  </p>


</form>

artemisian · Accepted Answer · 2017-02-17 17:18:30Z

0

Check the documentation at https://jqueryvalidation.org/validate. Just have a class that identifies fields you don't want to validate and use the 'ignore' option in the form.validate call:

jQuery(document).ready(function($) {
  "use strict";

  $("form").validate({ignore: ".ignore"});

 
  $(document.body).on('click', '.submiter', function () {
		$("input").valid();
	});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>


<form>
  <fieldset>
    <p>
      <label for="title-Mr">Mr</label>
      <input id="title-Mr" type="radio" name="title" value="MR" class="required ignore">
    </p>
    <p>
      <label for="bading">Bading</label>
      <input id="bading" type="text" name="bading" class="required">
    </p>
  </fieldset>
  <p>
    <a class="submiter" href="#submit">submit</a>
  </p>


</form>

answered Feb 17, 2017 at 17:18

artemisian

3,1162 gold badges24 silver badges25 bronze badges

1 Comment

dim Over a year ago

That ignores the full validation that's not what I'm after. It still needs to validate. I answered it myself anyways.

Gardelin · Accepted Answer · 2017-02-17 17:21:24Z

0

Here is one solution

<script>
    jQuery(document).ready(function($) {
  "use strict";

  $('form').validate({
    errorPlacement: function(error, element) {
      if(element.attr('id') == 'title-Mr'){
        return false;
      }
    }
  });

  $(document.body).on('click', '.submiter', function () {
        $("input").valid();
    });

});
</script>

answered Feb 17, 2017 at 17:21

Gardelin

1,08014 silver badges35 bronze badges

Comments

Damian T. · Accepted Answer · 2017-02-17 17:29:57Z

0

Your best options in this scenario are either:

If the radio button is not required, remove the class="required" attribute from the radio input.
Ignore validation of that element altogether by specifying ignore: <selector> inside of the $().validate() function.
```
$('input[type="radio"]').validate({
    ignore: "title-Mr"
});
```
If you want the radio button to still be required, but not display a message, specify a null message for that specific identifier.
```
$('input[type="radio"]').validate({
    messages: {
        "title-Mr": null
    }
});
```

According to https://jqueryvalidation.org/, the video on the front page explains a few different scenarios, each one becoming more and more complex. The scenario that demonstrates how to specify basic customization explains that there are two main parts to be passed to the $().validate() function: "rules" and "messages". Inside of "messages", the sub-keys are the ids for the form field message you are customizing. There are other options available, such as "ignore".

Hope this helps.

edited Feb 17, 2017 at 17:29

answered Feb 17, 2017 at 17:22

Damian T.

3322 silver badges10 bronze badges

2 Comments

dim Over a year ago

It is required. This is just to hide the error message.

Damian T. Over a year ago

Then I would recommend going with #3. That just specifies a custom message for that form element as being blank.

Collectives™ on Stack Overflow

jQuery Validate plugin - Disable error message on certain fields

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related