Why input type="url" validation not working

user_16303326 0
Viewed 476

I want that in the input field only url should allow so I tried to put type="url" in input tag but it is not working i can find out what preventing it to work. More over if anyone help me to tell is their any way so that I can only allow .com suffix url in the input.

Please help me

window.addEventListener('load', ()  => {
  document.querySelector('button.test-btn').addEventListener('click', e => {
    document.querySelector('#test').innerHTML = '<h3>Please Wait...</h3>';
    setTimeout(yes, 7000)
  })
})

function yes() {
  var button = document.getElementById('test');
  var name = document.getElementById('name');
  var age = document.getElementById('age');
  var location = document.getElementById('location');
  var str = 'Hello! <p> My name is Ashish</p><p>How Are You: ' + name.value +
    '';
  document.getElementById('test').innerHTML = str;
};
<label>
    Your Name: 
    <input type="url" id="name" />
</label>
<br />
<button class='test-btn'>Test</button>
<p id="test"></p>

validation input html jquery javascript
2 Answers

Like this

I disabled the test button and enable it if the url is valid according the the HTML5 url rules

window.addEventListener('load', () => {


  document.getElementById('url').addEventListener("input", function(e) {
      document.getElementById('test1').disabled = !e.target.checkValidity();
  })

  document.querySelector('button.test-btn').addEventListener('click', e => {
    document.querySelector('#test').innerHTML = '<h3>Please Wait...</h3>';

    setTimeout(yes, 7000)
  })
})

function yes() {

  var name = document.getElementById('fullName');
  var url = document.getElementById('url');


  var location = document.getElementById('location');
  var str = 'Hello! <p> My name is Ashish</p><p>How Are You: ' + name.value +
    '';
  document.getElementById('test').innerHTML = str;
};
<label>
    Your Name: 
    <input type="text" id="fullName" />
</label>
<label>
    Your URL: 
    <input type="url" id="url" />
</label>
<br />
<button class='test-btn' id="test1" disabled>Test</button>
<p id="test"></p>

Ok, alert it is

window.addEventListener('load', () => {

document.querySelector('button.test-btn').addEventListener('click', e => {
  var url = document.getElementById('url');
  if (!url.value || !url.checkValidity()) {
    alert("Please enter valid URL");
    url.focus()
    return
  }

    document.querySelector('#test').innerHTML = '<h3>Please Wait...</h3>';

    setTimeout(yes, 7000)
  })
})

function yes() {

  var name = document.getElementById('fullName');


  // var loc = document.getElementById('loc'); // location is reserved, but you do not have a location field
  var str = 'Hello! <p> My name is Ashish</p><p>How Are You: ' + name.value +
    '';
  document.getElementById('test').innerHTML = str;
};
<label>
    Your Name: 
    <input type="text" id="fullName" />
</label>
<label>
    Your URL: 
    <input type="url" id="url" />
</label>
<br />
<button class='test-btn' id="test1">Test</button>
<p id="test"></p>

user_2957830 

window.addEventListener('load', ()  => {
  document.querySelector('button.test-btn').addEventListener('click', e => {
    var name = document.getElementById('name').value;
  if (name.endsWith('.com')){
    document.querySelector('#test').innerHTML = '<h3>Please Wait...</h3>';
    setTimeout(yes, 7000);}
  })
})

function yes() {
  var button = document.getElementById('test');
  var name = document.getElementById('name');
  var age = document.getElementById('age');
  var location = document.getElementById('location');
  var str = 'Hello! <p> My name is Ashish</p><p>How Are You: ' + name.value +
    '';
  document.getElementById('test').innerHTML = str;
};
<form>
<label>
    Your Name: 
    <input type="url" id="name" required />
</label>
<br />
<button class='test-btn'>Test</button>
<p id="test"></p>
</form>

user_92676840
Related