Input validation for text boxes in HTML5

Question

I have a form like this,

<form>
  Username: <input type="text" name="usrname" required>
  <input type="button" value="Post">
</form>

I want a tooltip to pop-up if the user clicks on the button without entering anything in the textbox.

I know it will work if I change the button to like this - <input type="submit" value="Post">. But I don't want to do that.

@GjermundDahl I don't want to submit the form. When the button is clicked, some javascript function will get triggered. But if the button is clicked with no text in the textbox, a tooltip should show up. Is that possible? — Kemat Rochi, Apr 08 '16 at 05:13
The only way to display the native error message that some browser have, is by submit. Check this thread: http://stackoverflow.com/questions/11866910/how-to-force-a-html5-form-validation-without-submitting-it-via-jquery — Gjermund Dahl, Apr 08 '16 at 06:33
@GjermundDahl - I figured out how to do this based an answer from this post - http://stackoverflow.com/questions/7548612/triggering-html5-form-validation See my answer below - maybe it helps someone else too! — Kemat Rochi, Apr 08 '16 at 07:03

score 0 · Answer 1 · answered Apr 08 '16 at 04:51

0

Did you mean formaction instead of action?

<input type="text" name="usrname" required formaction="action_page.php">

action is a form tag attribute, not inputs's.

answered Apr 08 '16 at 04:51

Uzbekjon

11,655
3
37
54

score 0 · Answer 2 · answered Apr 08 '16 at 04:53

0

Use HTML5

Try like this it will work : action attribute specifically for form tag. not input tag

<form action="action_page.php">
    Username: <input type="text" name="usrname" required >
    <input type="submit" value="Post">
</form>

answered Apr 08 '16 at 04:53

soorapadman

4,451
7
35
47

score 0 · Answer 3 · answered Apr 08 '16 at 05:00

0

Use method "POST" in tag, It will work

   <form action="action_page.php" method="POST">
        Username: <input type="text" name="usrname" required >
        <input type="submit" value="Post">
    </form>

answered Apr 08 '16 at 05:00

Saba

31
2

score 0 · Answer 4 · edited May 23 '17 at 11:50

I figured out how to do this with some jQuery based on an answer from this post.

The following code does exactly what I was looking for,

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<form id="myForm">
  Username: <input type="text" name="usrname" required id="input">
  <input type="button" value="Post" id="button">
</form>


<script>
$('#button').click(function(e) {

  if ($('#input').val() === "") {

      $('<input type="submit">').hide().appendTo('#myForm').click().remove();

  }

});

</script>

</body>
</html>

See here for DEMO

Input validation for text boxes in HTML5

4 Answers4