7

hide pop-up of required of input using javascript jsfiddle

try to submit with empty input and see the pop-up, so i don't need to display that pop-up and i want the required to validate.

any help i don't need to display any warning.

<form>
  <input type="text" name="name" required="required" value="" />
  <input type="submit" name="submit" value="Submit" />

kadibra
  • 89
  • 1
  • 1
  • 9

2 Answers2

11

Since this is a HTML5 Event you can prevent the event from triggering the popup and still provide validation (https://developer.mozilla.org/en-US/docs/Web/Events/invalid). A simple event listener will do the job.

To handle focus include an id to that field like so ...

HTML

<input type="text" id="name" name="name" required="required" value="" />

And handle that focus within the return function ...

JS

document.addEventListener('invalid', (function () {
  return function (e) {
    e.preventDefault();
    document.getElementById("name").focus();
  };
})(), true);

EDIT Check it out http://jsfiddle.net/rz6np/9/

thedevlpr
  • 1,101
  • 12
  • 28
  • I need just the placeholder cursor to keep blinking with no pop up in the input area however this remove pop up only. – kadibra Sep 04 '15 at 15:42
  • 1
    @kadibra just add logic after the `e.preventDefault();` something like `document.getElementById("focusMe").focus();` where `focusMe` is the id of the element you want focused (in your case the input text) – Johan Sep 04 '15 at 15:46
  • @kadibra Just like Johan said just focus onto that element. Check out the edit I made. – thedevlpr Sep 04 '15 at 15:50
  • Just note that the invalid event gets called for every input that needs validation. – Johan Sep 04 '15 at 15:53
3
autocomplete="off" 

or

autocomplete="nope"

If autocomplete still works on an <input> despite having autocomplete="off", but you can change off to a random string, like nope.

It appears that Chrome now ignores autocomplete="off" unless it is on the <form>-tag.

leonheess
  • 16,068
  • 14
  • 77
  • 112