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, Dec 30 '13 at 20:32
I had no idea what it was either, but it's a built in function: http://msdn.microsoft.com/en-us/library/windows/apps/hh441292.aspx — zero298, Dec 30 '13 at 20:38

Andrew Morton · Answer 1 · 2013-12-30T22:00:01.687

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 '13 at 22:00

answered Dec 30 '13 at 20:35

Andrew Morton

24,203
9
60
84

score 0 · Accepted Answer · edited May 23 '17 at 12:28

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 '17 at 12:28

Community

1
1

answered Dec 30 '13 at 21:05

zero298

25,467
10
75
100

HTML5 validation from javascript

2 Answers2