HTML textbox required on button click

Question

<b>Gebruikersnaam:</b><br>
<input id="textbox" type="text" value="" size="25" required>
<a id="googleLink" href="##klik nu om member te kopen##" 
 onclick="this.href='https://websitelink.com?naam=' + encodeURIComponent(document.getElementById('textbox').value);">
  <button>Koop: MEMBER</button>
</a>

I want: <input id="textbox" type="text" value="" size="25" required>

to be required when i click: <button>Koop: MEMBER</button>

like: if <input id="textbox" type="text" value="" size="25" required> value=""

its shows an alert like: "No username entered"

Fixed, Thx Lepanto

Try using javascript to validate the content of the textbox and prompt the user to fill the missing field — Beat, Jun 15 '13 at 11:33
This facility only available in HTML5 without jquery or javascript — Hkachhia, Jun 15 '13 at 11:47
See this link http://stackoverflow.com/questions/3004703/required-attribute-html5 — Hkachhia, Jun 15 '13 at 11:48

score 1 · Answer 1 · answered Jun 15 '13 at 11:43

You need to cleanup your code first. not sure why you're using <a>. Anyway It would be pretty good to validate using onblur()

HTML code:

<input id="textbox" type="text" value="" size="25" required onblur="validateTextBox()">

JavaScript:

function validateTextBox() {
    if (document.getElementById("textbox").value != "") {} else {
        alert("Please enter a value");
    }
}

Check this out in JSFiddle.

score 0 · Answer 2 · answered Jun 15 '13 at 11:33

0

Of course, there is no such thing as required attribute in HTML tag textarea.

You have to create your own validation methods using Javascript. One of them is Validation plugin (which requires jQuery).

answered Jun 15 '13 at 11:33

Jaime Gris

1,136
6
11

score 0 · Answer 3 · answered Jun 15 '13 at 12:04

You have to write a JavaScript function to validation the textbox. Something like below

<script>
function doclick(){
    if(document.getElementById('textbox').value != ''){
        this.href='https://websitelink.com?naam=' + encodeURIComponent(document.getElementById('textbox').value);
    }
    else{
        alert('No username entered');
    }
}
</script>

And call this function in your HTML tag onclick

<b>Gebruikersnaam:</b><br>
<input id="textbox" type="text" value="" size="25" required>
<a id="googleLink" href="##klik nu om member te kopen##" onclick="doclick()">
<button>Koop: MEMBER</button>
</a>

HTML textbox required on button click

3 Answers3