CODEWITHSUNDEEP
javascripthtmlforms
Pawan
Pawan

Reputation: 1654

Preventing form submission when input field is empty

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>

Upvotes: 25

Views: 115463

Answers (6)

Archirk
Archirk

Reputation: 651

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

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

Upvotes: 12

wecky
wecky

Reputation: 910

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.

Upvotes: 25

gabriel alejandro Rodriguez
gabriel alejandro Rodriguez

Reputation: 79

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.

Upvotes: 0

Yitzhak Weinberg
Yitzhak Weinberg

Reputation: 2582

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')

Upvotes: 1

Amir Md Amiruzzaman
Amir Md Amiruzzaman

Reputation: 2079

<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>

Upvotes: 2

j08691
j08691

Reputation: 208022

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

Upvotes: 44

Related Questions