CODEWITHSUNDEEP
javascriptjqueryhtmlvalidation
azam khan
azam khan

Reputation: 93

setCustomValidity is not a function

This is the simple code I run hoping to get control over html5 validation but the browser says setCustomvalidity is not a function. what am I doing wrong?

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<body>
    <input type='text' id='tocheck' />
    <script>
        $("#tocheck").click(function () {
            var $this = $(this);
            $this.setCustomValidity("slkdjf");
        });
    </script>
</body>
</html>

Upvotes: 3

Views: 16441

Answers (4)

Do Duc Trieu fsaf
Do Duc Trieu fsaf

Reputation: 21

you can use syntax like

$('#id**^**.class')[0].setCustomValidity('**some notification string ...**');

Upvotes: 0

Unmitigated
Unmitigated

Reputation: 89294

jQuery does not have the setCustomValidity function, but the actual DOM element does. The jQuery selector always returns an Array, so you can use the zero index to get the actual DOM element or you can just use this (not $(this)) to get the DOM element upon which you can set the custom validity.

 <!doctype html>

    <html>
    <head>

    <meta charset="utf-8">
    <title>Untitled Document</title>


    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

   </head>

  <body>
      <form>
      <input type='text' id='tocheck'/>
      <button>
      Submit
      </button>
      </form>
      <script>
       $("#tocheck").click(function(){
            this.setCustomValidity("slkdjf");
       });
     </script>
  </body>

Upvotes: 4

VolArt
VolArt

Reputation: 438

try to 

$this[0].setCustomValidity("slkdjf");

And html

<form> 
    <input type="text" id="tocheck">
    <button type="submit">Button</button>
</form>

Upvotes: 2

Kiran Shahi
Kiran Shahi

Reputation: 7980

You can simply do this.setCustomValidity("slkdjf"); this is the DOM object, whereas $(this) is the jQuery wrapper around same.

$("#tocheck").click(function(){
  this.setCustomValidity("slkdjf");
  $( "<p>slkdjf</p>" ).insertAfter( this );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='tocheck'/>

Upvotes: 0

Related Questions