CODEWITHSUNDEEP
javascriptjqueryhtmlvalidation
Babel
Babel

Reputation: 619

Custom validation in HTML5 or jQuery validate

I have a field with id max-number

Max number:<input type="number" required  id="max-number">

and three or more fields input fields:

 Example 1: <input  type="number" class="min-num" data-slug="min-number" required id="example-num-1"/> <br/>
 Example 2: <input  type="number" class="min-num" data-slug="min-number" required id="example-num-2"/> <br/>
 Example 3: <input  type="number" class="min-num" data-slug="min-number" required id="example-num-3"/> <br/> <br/>

On form submit the number inside these examples fields should be smaller then the field with id="max-number"

If the number in these example fields is greater than the max I want to show a custom validation message under id="max-number" that says 'The max year should be greater than all examples.'

I tried to do this using HTML5 validation but I couldn't achieve.

I tried to do this using 'onblur' event. 

 Example 1: <input  type="number" class="min-num" data-slug="min-number" required id="example-num-1" onblur="myFunction()"/> <br/>
 Example 2: <input  type="number" class="min-num" data-slug="min-number" required id="example-num-2" onblur="myFunction()"/> <br/>
 Example 3: <input  type="number" class="min-num" data-slug="min-number" required id="example-num-3" onblur="myFunction()"/> <br/> <br/>

Then I tried to create a js code that will be executed on all example inputs:

function myFunction() {
  var maxNumber = parseInt($('#max-number').val());

  var textInputs = $(':input');
  var datas = textInputs.filter('[data-slug]');
  datas.each(
    function (i, e) {
      if (e.value < maxNumber){
        console.log("000");
        $('#max-number').setCustomValidity('The max year should be greater than all examples.');
      }    
    }
  );
}

but this doesn't work and gives this error

 uncaught typeerror: $(...).setcustomvalidity is not a function

I don't know why I can't do this :/

I created a jsfiddle

Upvotes: 0

Views: 1141

Answers (2)

Titus
Titus

Reputation: 22484

The problem is that $("#max-number") is a jQuery object and you're trying to call setCustomValidity on it. This function is a HTMLSelectElement function not a jQuery function.

You should use $("#max-number")[0].setCustomValidity(....)

HERE is a working version of your fiddle

Upvotes: 3

Muhammad Omer Aslam
Muhammad Omer Aslam

Reputation: 23778

.setCustomValidity() does not belong to JQUERY but DOM use $('#max-number')[0] to use it it should work.

Upvotes: 2

Related Questions