Preventing form submission when input field is empty

Question

When no value is provided to the roll input field an alert is produced by the empty() function but this empty value is still passed to retrive.php. So how can I stop this from happening and only pass the value to retrive.php when some input value is provided?

<html>
 <head>
   <title>STUDENT FORM</title>
    <script type="text/javascript">
        function empty()
        {
          var x;
          x = document.getElementById("roll-input").value;
          if (x == "") 
           { 
              alert("Enter a Valid Roll Number");
           };
        }
    </script>
</head>
 <body >
  <h1 align="center">student details</h1>       
    <div id="input">
      <form action='retrive.php' method='get'>
       <fieldset>
        <legend>Get Details</legend>
          <dl>
            <dt><label for="roll-input">Enter Roll Number</label></dt>
        <dd><input type="text" name="roll" id="roll-input"><dd>
            <input type="submit" value="submit" onClick="empty()" />
          </dl>
        </fieldset>
      </form>
    </div>  
  </body>
</html>

j08691 · Accepted Answer · 2013-04-11 16:26:27Z

44

You need to return false to cancel the submit.

function empty() {
    var x;
    x = document.getElementById("roll-input").value;
    if (x == "") {
        alert("Enter a Valid Roll Number");
        return false;
    };
}

and

<input type="submit" value="submit" onClick="return empty()" />

jsFiddle example

answered Apr 11, 2013 at 16:26

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

wecky · Accepted Answer · 2018-04-19 14:33:52Z

27

How about using the required attribute?

<input id="Name" name="Name" class="form-control" placeholder="Enter name" type="text" required/>

Only works in html5 though.

answered Apr 19, 2018 at 14:33

wecky

96013 silver badges20 bronze badges

Comments

Archirk · Accepted Answer · 2020-05-23 16:09:01Z

12

The easiest way is to add attribute "required" into the input tag

<input type="text" name="name" required>

edited May 23, 2020 at 16:09

answered Mar 21, 2020 at 22:05

Archirk

7023 gold badges14 silver badges31 bronze badges

Comments

Amir Md Amiruzzaman · Accepted Answer · 2014-01-09 20:04:05Z

<form method="post" name="loginForm" id ="loginForm" action="login.php">
<input type="text" name="uid" id="uid" />
<input type="password" name="pass"  id="pass" />
<input type="submit" class="button" value="Log In"/>
<script type="text/javascript">

$('#loginForm').submit(function() 
{
    if ($.trim($("#uid").val()) === "" || $.trim($("#pass").val()) === "") {
        alert('Please enter Username and Password.');
    return false;
    }
});

</script>
</form>

Yitzhak Weinberg · Accepted Answer · 2016-06-08 08:55:57Z

1

i use with this I thinking it's maybe can help

  $(function () {
        $('form').submit(function () {
            if ($('input').val() === "") {
                alert('Please enter Username and Password.');
                return false;
            }
        });
    })

or work with class or ID like this

$('.inputClass')
$('#inputID')

answered Jun 8, 2016 at 8:55

Yitzhak Weinberg

2,6221 gold badge22 silver badges22 bronze badges

Comments

gabriel alejandro Rodriguez · Accepted Answer · 2017-06-23 08:51:00Z

0

If you want to save code you can simply do:

<input type="text" name="roll" id="roll-input">
<input type="submit" value="submit" onClick="return document.getElementById('roll-input').value !=''"/>

I just say.

answered Jun 23, 2017 at 8:51

gabriel alejandro Rodriguez

791 silver badge3 bronze badges

Collectives™ on Stack Overflow

Preventing form submission when input field is empty

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related