CODEWITHSUNDEEP
javascriptjqueryhtmlcss
devadinesh
devadinesh

Reputation: 137

Javascript function to check whether a field is empty or not

The following function can be used to check whether the user has entered anything in a given field. Blank fields can indicate two kinds of values. A zero-length string or a NULL value.

function required()  
{  
var empt = document.forms["form"]["text"].value;  
if (empt == "")  
{  
alert("Please input a Value");  
return false;  
}  
else   
{  
alert('Code has accepted : you can try another');  
return true;   
}  
}  
li {list-style-type: none;  
font-size: 16pt;  
}  
.mail {  
margin: auto;  
padding-top: 10px;  
padding-bottom: 10px;  
width: 400px;  
background : #D8F1F8;  
border: 1px soild silver;  
}  
.mail h2 {  
margin-left: 38px;  
}  
input {  
font-size: 20pt;  
}  
input:focus, textarea:focus{  
background-color: lightyellow;  
}  
input submit {  
font-size: 12pt;  
}  
.rq {  
color: #FF0000;  
font-size: 10pt;  
}  
<!doctype html>  
<html lang="en">  
<head>  
<meta charset="utf-8">  
<title>JavaScript form validation - checking non-empty</title>  
<link rel='stylesheet' href='form-style.css' type='text/css' />  
</head>  
<body>  
<div class="mail">  
<h2>Input your Name and Submit</h2>  
<form name="form1" action="#" onsubmit="required()">  
<ul>  
<li><input type='text' name ='text1'/></li>  
<li class="rq">*Required Field</li>  
<li><input type="submit" name="submit" value="Submit" /></li>  
</ul>  
</form>  
</div>  
<script src="non-empty.js"></script>  
</body>  
</html>

I am trying this code but cannot run the script. I am also using jquery.js if it helps

how can I solve this problem?

Upvotes: 0

Views: 1696

Answers (4)

Nikhil Ghuse
Nikhil Ghuse

Reputation: 1288

Its simple add id to your input type as txtInput and get its value like

        document.getElementById('txtInput').value;  


function required()  
{  
var empt = document.getElementById('txtInput').value;  
if (empt == "")  
{  
alert("Please input a Value");  
return false;  
}  
else   
{  
alert('Code has accepted : you can try another');  
return true;   
}  
}  
li {list-style-type: none;  
font-size: 16pt;  
}  
.mail {  
margin: auto;  
padding-top: 10px;  
padding-bottom: 10px;  
width: 400px;  
background : #D8F1F8;  
border: 1px soild silver;  
}  
.mail h2 {  
margin-left: 38px;  
}  
input {  
font-size: 20pt;  
}  
input:focus, textarea:focus{  
background-color: lightyellow;  
}  
input submit {  
font-size: 12pt;  
}  
.rq {  
color: #FF0000;  
font-size: 10pt;  
}  
<!doctype html>  
<html lang="en">  
<head>  
<meta charset="utf-8">  
<title>JavaScript form validation - checking non-empty</title>  
<link rel='stylesheet' href='form-style.css' type='text/css' />  
</head>  
<body>  
<div class="mail">  
<h2>Input your Name and Submit</h2>  
<form name="form1" action="#" onsubmit="required()">  
<ul>  
<li><input type='text' id="txtInput" name ='text1'/></li>  
<li class="rq">*Required Field</li>  
<li><input type="submit" name="submit" value="Submit" /></li>  
</ul>  
</form>  
</div>  
<script src="non-empty.js"></script>  
</body>  
</html>

Upvotes: 0

Yashwanth Naik
Yashwanth Naik

Reputation: 44

Add an id of "id" to your text field and "submit" to your submit button.

    $('#submit').click(function(){
        if($('#id').val()){
           alert('Code has accepted : you can try another');
           return true;
        }else{
`         alert('Enter Text');
          return false;
        }
    })

Upvotes: 0

Benjamin Sch&#252;ller
Benjamin Sch&#252;ller

Reputation: 2189

The names for your form and textfield was wrong in javascript. I've corrected this in the following snippet.

Only the line "var empt = document.forms["form1"]["text1"].value;" changed.

function required()  
{  
var empt = document.forms["form1"]["text1"].value;  
if (empt == "")  
{  
alert("Please input a Value");  
return false;  
}  
else   
{  
alert('Code has accepted : you can try another');  
return true;   
}  
}  
li {list-style-type: none;  
font-size: 16pt;  
}  
.mail {  
margin: auto;  
padding-top: 10px;  
padding-bottom: 10px;  
width: 400px;  
background : #D8F1F8;  
border: 1px soild silver;  
}  
.mail h2 {  
margin-left: 38px;  
}  
input {  
font-size: 20pt;  
}  
input:focus, textarea:focus{  
background-color: lightyellow;  
}  
input submit {  
font-size: 12pt;  
}  
.rq {  
color: #FF0000;  
font-size: 10pt;  
}  
<!doctype html>  
<html lang="en">  
<head>  
<meta charset="utf-8">  
<title>JavaScript form validation - checking non-empty</title>  
<link rel='stylesheet' href='form-style.css' type='text/css' />  
</head>  
<body>  
<div class="mail">  
<h2>Input your Name and Submit</h2>  
<form name="form1" action="#" onsubmit="required()">  
<ul>  
<li><input type='text' name ='text1'/></li>  
<li class="rq">*Required Field</li>  
<li><input type="submit" name="submit" value="Submit" /></li>  
</ul>  
</form>  
</div>  
<script src="non-empty.js"></script>  
</body>  
</html>

Upvotes: 1

N. Ivanov
N. Ivanov

Reputation: 1823

Since you mentioned that you are using jQuery, here is a working example:

function required(e) {
  //e.preventDefault();
  var empt = $("#text1").val();
  if (empt == "") {
    alert("Please input a Value");
    return false;
  } else {
    alert('Code has accepted : you can try another');
    return true;
  }
}
li {
  list-style-type: none;
  font-size: 16pt;
}

.mail {
  margin: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 400px;
  background: #D8F1F8;
  border: 1px soild silver;
}

.mail h2 {
  margin-left: 38px;
}

input {
  font-size: 20pt;
}

input:focus,
textarea:focus {
  background-color: lightyellow;
}

input submit {
  font-size: 12pt;
}

.rq {
  color: #FF0000;
  font-size: 10pt;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>JavaScript form validation - checking non-empty</title>
  <link rel='stylesheet' href='form-style.css' type='text/css' />
</head>

<body>
  <div class="mail">
    <h2>Input your Name and Submit</h2>
    <form name="form1" action="#" onsubmit="required()">
      <ul>
        <li><input type='text' id="text1" name='text1' /></li>
        <li class="rq">*Required Field</li>
        <li><input type="submit" name="submit" value="Submit" /></li>
      </ul>
    </form>
  </div>
  <script src="non-empty.js"></script>
</body>

</html>

The only changes were, to add an ID to the textfield, and to grab the value by using jQuery.

Hope this helps!

Upvotes: 0

Related Questions