HTML5 validation from javascript

Question

I can't see the validation popup when I create HTML and add events programmaticaly from javascript. Here is the link to my jsfiddle

http://jsfiddle.net/midnightcoder/sdMQ6/1/

Here is my javascript:

var newInput = document.createElement ("input");
document.body.appendChild (newInput);
newInput.type = "text";
//newInput.required = true;
newInput.Id = "inputId";
var newButton = document.createElement ("input");
document.body.appendChild (newButton);
newButton.type = "button";

newInput.addEventListener ("input", checkValid, false); 

function checkValid(newInput) 
{
 if (newInput.value == "") 
 {
   newInput.setCustomValidity("Write a text");
 } 
  else 
 {
   newInput.setCustomValidity(''); 
 }
}

newButton.onclick = function () 
{
   var newInputValue = newInput.value;
   var newInputAdd = document.createElement("p");
   newInputAdd.innerHTML = newInputValue;
   checkValid (newInputValue);
   document.body.insertBefore (newInputAdd, document.body.childNodes[0]);
   newInput.value = '';
 }

What am I doing wrong?

what's setCustomValidity? it's not defined anywhere but you call it in checkValid() function. — alexndm
– alexndm, Commented Dec 30, 2013 at 20:32
I had no idea what it was either, but it's a built in function: msdn.microsoft.com/en-us/library/windows/apps/hh441292.aspx — zero298
– zero298, Commented Dec 30, 2013 at 20:38

Andrew Morton · Accepted Answer · 2013-12-30 22:00:01Z

1

You're calling checkValid with a value, not a reference to a control to which you could apply .setCustomValidity. You want checkValid(newInput).

Also, I would not leave a space in the fashion of a (b), rather, write it as a(b).

edited Dec 30, 2013 at 22:00

answered Dec 30, 2013 at 20:35

Andrew Morton

25.3k9 gold badges66 silver badges96 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:28:41Z

0

I tried to get the tool tip to trigger for a while, I was even able to read out the validation message into a <div>. However, after doing some more research, it seems that you need to trigger a submit event, which you aren't doing but could do through a <form>.

A related question can be found here:

How to show setCustomValidity message/tooltip without submit event

edited May 23, 2017 at 12:28

CommunityBot

11 silver badge

answered Dec 30, 2013 at 21:05

zero298

27.1k10 gold badges80 silver badges109 bronze badges

Collectives™ on Stack Overflow

HTML5 validation from javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related