Custom validation in HTML5 or jQuery validate

Question

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

Titus · Accepted Answer · 2017-11-27 11:44:19Z

3

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

answered Nov 27, 2017 at 11:44

Titus

22.6k1 gold badge26 silver badges36 bronze badges

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

1 Comment

Babel Over a year ago

But now form is never submitted, whatever I write there..?

Muhammad Omer Aslam · Accepted Answer · 2017-11-27 11:42:54Z

2

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

answered Nov 27, 2017 at 11:42

Muhammad Omer Aslam

23.9k9 gold badges47 silver badges69 bronze badges

2 Comments

Babel Over a year ago

But now form is never submitted, whatever I write there..?

Muhammad Omer Aslam Over a year ago

can get what you mean to say by that, are there any erorrs in the console or not?

Collectives™ on Stack Overflow

Custom validation in HTML5 or jQuery validate

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related