JavaScript validation for empty input field

Question

I have this input field <input name="question"/> I want to call IsEmpty function when submit clicking submit button.

I tried the code below but did not work. any advice?

function IsEmpty() {

  if (document.form.question.value == "") {
    alert("empty");
  }
  return;
}

Question: <input name="question" /> <br/>

<input id="insert" onclick="IsEmpty();" type="submit" value="Add Question" />

You accepted an invalid answer. Checking for null is odd since an input (or textarea) returns always a String. Also, you should not use inline JavaScript. Also you should not use blindly return false... etc etc — Roko C. Buljan
– Roko C. Buljan, Commented Oct 28, 2019 at 19:04

icc97 · Accepted Answer · 2023-02-20 14:52:38Z

157

<script type="text/javascript">
  function validateForm() {
    var a = document.forms["Form"]["answer_a"].value;
    var b = document.forms["Form"]["answer_b"].value;
    var c = document.forms["Form"]["answer_c"].value;
    var d = document.forms["Form"]["answer_d"].value;
    if ((a == null || a == "") && (b == null || b == "") && (c == null || c == "") && (d == null || d == "")) {
      alert("Please Fill In All Required Fields");
      return false;
    }
  }
</script>

<form method="post" name="Form" onsubmit="return validateForm()" action="">
  <textarea cols="30" rows="2" name="answer_a" id="a"></textarea>
  <textarea cols="30" rows="2" name="answer_b" id="b"></textarea>
  <textarea cols="30" rows="2" name="answer_c" id="c"></textarea>
  <textarea cols="30" rows="2" name="answer_d" id="d"></textarea>
</form>

edited Feb 20, 2023 at 14:52

icc97

13.1k9 gold badges84 silver badges99 bronze badges

answered Jan 9, 2014 at 10:40

Sk Mourya

1,6501 gold badge11 silver badges2 bronze badges

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

6 Comments

tazboy Over a year ago

'onsubmit="return validate()"' needs to be changed. validate is not the name of the function. It should be 'onsubmit="return validateForm()"'

Vishal Over a year ago

It would be best to explain the answer and OP's doubt.

Bing Over a year ago

This accepted is actually invalid. The commas in the if statement will cause only the last check to be returned: stackoverflow.com/a/5348007/713874

icc97 Over a year ago

@Bing wow, you taught me something today. I'll add && to this answer.

Matt Over a year ago

@icc97 I believe those should be || and not &&. Otherwise all the fields have to be empty -at once- before the alert will appear.

|

Roko C. Buljan · Accepted Answer · 2019-10-28 19:01:15Z

68

An input field can have whitespaces, we want to prevent that.
Use String.prototype.trim():

function isEmpty(str) {
    return !str.trim().length;
}

Example:

const isEmpty = str => !str.trim().length;

document.getElementById("name").addEventListener("input", function() {
  if( isEmpty(this.value) ) {
    console.log( "NAME is invalid (Empty)" )
  } else {
    console.log( `NAME value is: ${this.value}` );
  }
});

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

edited Oct 28, 2019 at 19:01

answered Feb 12, 2015 at 19:10

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

2 Comments

Pedro Sousa Over a year ago

Besides null and "", my code I was missing this piece also. It worked for me. Thanks Roko.

icc97 Over a year ago

You should also check for undefined/null before doing trim: return !str || !str.trim().length

Community · Accepted Answer · 2020-06-20 09:12:55Z

42

See the working example here

You are missing the required <form> element. Here is how your code should be like:

function IsEmpty() {
  if (document.forms['frm'].question.value === "") {
    alert("empty");
    return false;
  }
  return true;
}

<form name="frm">
  Question: <input name="question" /> <br />
  <input id="insert" onclick="return IsEmpty();" type="submit" value="Add Question" />
</form>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 14, 2010 at 21:02

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

1 Comment

sparecycle Over a year ago

Is there a way to do this for all fields in forms?

Atif Tariq · Accepted Answer · 2016-08-10 11:08:08Z

24

I would like to add required attribute in case user disabled javascript:

<input type="text" id="textbox" required/>

It works on all modern browsers.

answered Aug 10, 2016 at 11:08

Atif Tariq

2,7701 gold badge31 silver badges35 bronze badges

Comments

Jak Samun · Accepted Answer · 2013-06-21 20:11:48Z

13

if(document.getElementById("question").value.length == 0)
{
    alert("empty")
}

edited Jun 21, 2013 at 20:11

answered Jun 15, 2013 at 21:21

Jak Samun

1,1111 gold badge8 silver badges9 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:10:32Z

7

Add an id "question" to your input element and then try this:

   if( document.getElementById('question').value === '' ){
      alert('empty');
    }

The reason your current code doesn't work is because you don't have a FORM tag in there. Also, lookup using "name" is not recommended as its deprecated.

See @Paul Dixon's answer in this post : Is the 'name' attribute considered outdated for <a> anchor tags?

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Oct 14, 2010 at 21:04

Rajat

34.3k20 gold badges70 silver badges89 bronze badges

Comments

Gabriel Nadaleti · Accepted Answer · 2020-01-29 15:02:18Z

2

You can loop through each input after submiting and check if it's empty

let form = document.getElementById('yourform');

form.addEventListener("submit", function(e){ // event into anonymous function
  let ver = true;
  e.preventDefault(); //Prevent submit event from refreshing the page

  e.target.forEach(input => { // input is just a variable name, e.target is the form element
     if(input.length < 1){ // here you're looping through each input of the form and checking its length
         ver = false;
     }
  });

  if(!ver){
      return false;
  }else{
     //continue what you were doing :)
  } 
})

answered Jan 29, 2020 at 15:02

Gabriel Nadaleti

1,7251 gold badge11 silver badges22 bronze badges

Comments

Rizki Fauji · Accepted Answer · 2020-05-14 08:19:21Z

2

<script type="text/javascript">
  function validateForm() {
    var a = document.forms["Form"]["answer_a"].value;
    var b = document.forms["Form"]["answer_b"].value;
    var c = document.forms["Form"]["answer_c"].value;
    var d = document.forms["Form"]["answer_d"].value;
    if (a == null || a == "", b == null || b == "", c == null || c == "", d == null || d == "") {
      alert("Please Fill All Required Field");
      return false;
    }
  }
</script>

<form method="post" name="Form" onsubmit="return validateForm()" action="">
  <textarea cols="30" rows="2" name="answer_a" id="a"></textarea>
  <textarea cols="30" rows="2" name="answer_b" id="b"></textarea>
  <textarea cols="30" rows="2" name="answer_c" id="c"></textarea>
  <textarea cols="30" rows="2" name="answer_d" id="d"></textarea>
</form>

answered May 14, 2020 at 8:19

Rizki Fauji

232 bronze badges

1 Comment

Ehsan Mahmud Over a year ago

Hi, when you are providing a solution, it would be great to provide a reason why your solution fix the problem which might help the future readers.

Kenneth J · Accepted Answer · 2010-10-14 21:04:49Z

1

if(document.getElementById("question").value == "")
{
    alert("empty")
}

answered Oct 14, 2010 at 21:04

Kenneth J

4,89612 gold badges43 silver badges56 bronze badges

2 Comments

Pointy Over a year ago

... there's no "id" attribute on the <input> element; this would only work in IE because IE is broken.

Kenneth J Over a year ago

sorry, I thought there was an ID, document.getElementsByName("question")[0].value, or just add an ID to the element

Bal · Accepted Answer · 2010-10-14 21:05:17Z

1

Just add an ID tag to the input element... ie:

and check the value of the element in you javascript:

document.getElementById("question").value

Oh ya, get get firefox/firebug. It's the only way to do javascript.

answered Oct 14, 2010 at 21:05

Bal

2,0975 gold badges26 silver badges51 bronze badges

Comments

Wemerson Nino · Accepted Answer · 2020-12-10 19:17:07Z

Customizing the input message using HTML validation when clicking on Javascript button

function msgAlert() {
  const nameUser = document.querySelector('#nameUser');
  const passUser = document.querySelector('#passUser');

  if (nameUser.value === ''){
    console.log('Input name empty!');
    nameUser.setCustomValidity('Insert a name!');
  } else {
    nameUser.setCustomValidity('');
    console.log('Input name ' + nameUser.value);
  }
}

const v = document.querySelector('.btn-petroleo');
v.addEventListener('click', msgAlert, false);

.container{display:flex;max-width:960px;}
.w-auto {
    width: auto!important;
}
.p-3 {
    padding: 1rem!important;
}
.align-items-center {
    -ms-flex-align: center!important;
    align-items: center!important;
}
.form-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}
.mb-2, .my-2 {
    margin-bottom: .5rem!important;
}
.d-flex {
    display: -ms-flexbox!important;
    display: flex!important;
}
.d-inline-block {
    display: inline-block!important;
}
.col {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}
.mr-sm-2, .mx-sm-2 {
    margin-right: .5rem!important;
}
label {
    font-family: "Oswald", sans-serif;
    font-size: 12px;
    color: #007081;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
}
label {
    display: inline-block;
    margin-bottom: .5rem;
}
.x-input {
    background-color: #eaf3f8;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
}
.login-input {
    border: none !important;
    width: 100%;
}
.p-4 {
    padding: 1.5rem!important;
}
.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
button, input {
    overflow: visible;
    margin: 0;
}
.form-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}
.form-row>.col, .form-row>[class*=col-] {
    padding-right: 5px;
    padding-left: 5px;
}
.col-lg-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
.mt-1, .my-1 {
    margin-top: .25rem!important;
}
.mt-2, .my-2 {
    margin-top: .5rem!important;
}
.mb-2, .my-2 {
    margin-bottom: .5rem!important;
}
.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}
.btn-petroleo {
    background-color: #007081;
    color: white;
    font-family: "Oswald", sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    padding: 8px 30px;
    letter-spacing: 2px;
}
.btn-xg {
    padding: 20px 100px;
    width: 100%;
    display: block;
}
.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
input {
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: -internal-light-dark(black, white);
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    appearance: textfield;
    background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
    -webkit-rtl-ordering: logical;
    cursor: text;
    margin: 0em;
    font: 400 13.3333px Arial;
    padding: 1px 2px;
    border-width: 2px;
    border-style: inset;
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(195, 195, 195));
    border-image: initial;
}

<div class="container">
              <form name="myFormLogin" class="w-auto p-3 mw-10">
                <div class="form-row align-items-center">
                  <div class="col w-auto p-3 h-auto d-inline-block my-2">
                    <label class="mr-sm-2" for="nameUser">Usuário</label><br>
                    <input type="text" class="form-control mr-sm-2 x-input login-input p-4" id="nameUser"
                           name="nameUser" placeholder="Name" required>
                  </div>
                </div>
                <div class="form-row align-items-center">
                  <div class="col w-auto p-3 h-auto d-inline-block my-2">
                    <label class="mr-sm-2" for="passUser">Senha</label><br>
                    <input type="password" class="form-control mb-3 mr-sm-2 x-input login-input p-4" id="passUser"
                           name="passUser" placeholder="Password" required>
                    <div class="help">Esqueci meu usuário ou senha</div>
                  </div>
                </div>
                <div class="form-row d-flex align-items-center">
                  <div class="col-lg-12 my-1 mt-2 mb-2">
                    <button type="submit" value="Submit" class="btn btn-petroleo btn-lg btn-xg btn-block p-4">Entrar</button>
                  </div>
                </div>
                <div class="form-row align-items-center d-flex">
                  <div class="col-lg-12 my-1">
                    <div class="nova-conta">Ainda não é cadastrado? <a href="">Crie seu acesso</a></div>
                  </div>
                </div>
              </form>
            </div>

Kingston Fortune · Accepted Answer · 2019-04-03 16:44:47Z

My solution below is in es6 because I made use of const if you prefer es5 you can replace all const with var.

const str = "       Hello World!        ";
// const str = "                     ";

checkForWhiteSpaces(str);

function checkForWhiteSpaces(args) {
    const trimmedString = args.trim().length;
    console.log(checkStringLength(trimmedString))     
    return checkStringLength(trimmedString)        
}

// If the browser doesn't support the trim function
// you can make use of the regular expression below

checkForWhiteSpaces2(str);

function checkForWhiteSpaces2(args) {
    const trimmedString = args.replace(/^\s+|\s+$/gm, '').length;
    console.log(checkStringLength(trimmedString))     
    return checkStringLength(trimmedString)
}

function checkStringLength(args) {
    return args > 0 ? "not empty" : "empty string";
}

Akshay Mulgavkar · Accepted Answer · 2019-07-12 06:40:43Z

0

<pre>
       <form name="myform" action="saveNew" method="post" enctype="multipart/form-data">
           <input type="text"   id="name"   name="name" /> 
           <input type="submit"/>
       </form>
    </pre>

<script language="JavaScript" type="text/javascript">
  var frmvalidator = new Validator("myform");
  frmvalidator.EnableFocusOnError(false);
  frmvalidator.EnableMsgsTogether();
  frmvalidator.addValidation("name", "req", "Plese Enter Name");
</script>

before using above code you have to add the gen_validatorv31.js file

edited Jul 12, 2019 at 6:40

Akshay Mulgavkar

1,77013 silver badges22 bronze badges

answered Nov 17, 2017 at 11:03

Ravindra Bohra

115 bronze badges

Comments

A. Meshu · Accepted Answer · 2020-01-09 12:46:04Z

0

Combining all the approaches we can do something like this:

const checkEmpty = document.querySelector('#checkIt');
checkEmpty.addEventListener('input', function () {
  if (checkEmpty.value && // if exist AND
    checkEmpty.value.length > 0 && // if value have one charecter at least
    checkEmpty.value.trim().length > 0 // if value is not just spaces
  ) 
  { console.log('value is:    '+checkEmpty.value);}
  else {console.log('No value'); 
  }
});

<input type="text" id="checkIt" required />

Note that if you truly want to check values you should do that on the server, but this is out of the scope for this question.

answered Jan 9, 2020 at 12:46

A. Meshu

4,1782 gold badges24 silver badges35 bronze badges

Comments

Spinstaz · Accepted Answer · 2021-10-21 18:50:48Z

0

The following code worked for me perfectly:

<form action = "dashboard.php" onsubmit= "return someJsFunction()">
  <button type="submit" class="button"  id = "submit" name="submit" >Upload to live listing</button>
</form>
    <script type="text/javascript">

       function someJsFunction(){

        const input = document.getElementById('input1');

        if(input.value === ""){
          alert ("no input?"); // This will prevent the Form from submitting
          return false;                              
        }else{
          return true; // this will submit the form and handle the control to php.
        }
     }

</script>

answered Oct 21, 2021 at 18:50

Spinstaz

3477 silver badges12 bronze badges

Collectives™ on Stack Overflow

JavaScript validation for empty input field

15 Answers 15

6 Comments

2 Comments

See the working example here

1 Comment

Comments

Comments

Comments

Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

15 Answers 15

6 Comments

2 Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related