CODEWITHSUNDEEP
javascriptjqueryhtmlcss
AlwaysStudent
AlwaysStudent

Reputation: 1374

Check multiple input empty value wont work

I am trying to make a survey system using jquery. I need to detect if any input value is empty then get error function. I did it but it is working just one time. How to work my code multiple times?

I have created this 

$(document).ready(function(){
   $("body").on("click",".createnew", function(){
     if ($(".myinput").val().length !== 0) { 
      if($('.input').length !== 4){
        $(".inputs").append("<div class='input' id='surway_poll'><input type='text' class='myinput' id='hoho' placeholder='Write something!'></div>");
    } else {
       $(".createnew").remove();
    }
  } else {
     alert("You can not leave it blank input field!");
  }
   });
});
html,
body {
   width: 100%;
   height: 100%;
   padding: 0px;
   margin: 0px;
   font-family: helvetica, arial, sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
}
.container {
   position:relative;
   width:100%;
   max-width:500px;
   margin:0px auto;
   overflow:hidden;
   margin-top:100px;
}
.inputs {
   position:relative;
   width:100%;
   overflow:hidden;
}
.input {
   position:relative;
   width:100%;
   overflow:hidden;
   margin-bottom:10px;
}
.myinput{
   width:100%;
   position:relative;
   height:35px;
   font-size:14px;
   padding:10px;
   outline:none;
}
*{
   box-sizing:border-box;
   -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
}

.createnew{
   position:relative;
   float:right;
   margin-top:10px;
   font-size:14px;
   font-weight:600;
   background-color:red;
   color:#ffffff;
   padding:8px;
}

.error {
   border:1px solid red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <div class="inputs">
      <div class="input" id="surway_poll">
         <input type="text" class="myinput" id="hoho" placeholder="Write something!">
      </div>
   </div>
   <div class="createnew">Create New Input</div>
</div>

In this demo, you can see the create a new input button. So if you click it then you get the alert. Because you didn't write any text from an input. But if you create second input than if it is empty the alert is not working at that time. What I am missing here any one can tell me?

Upvotes: 0

Views: 448

Answers (3)

trincot
trincot

Reputation: 350137

The jQuery val method takes the value of the first matched element only, so it wont work for the second input as it still returns the content of the first.

Solve this by adding :last to the selector:

$(document).ready(function(){
   $("body").on("click",".createnew", function(){
     if ($(".myinput:last").val().length !== 0) { 
       $(".inputs").append("<div class='input' id='surway_poll'><input type='text' class='myinput' id='hoho' placeholder='Write something!'></div>");
       if($('.input').length >= 4){
         $(".createnew").remove();
       }
     } else {
       alert("You can not leave an input field blank!");
     }
   });
});
html,
body {
   width: 100%;
   height: 100%;
   padding: 0px;
   margin: 0px;
   font-family: helvetica, arial, sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
}
.container {
   position:relative;
   width:100%;
   max-width:500px;
   margin:0px auto;
   overflow:hidden;
   margin-top:100px;
}
.inputs {
   position:relative;
   width:100%;
   overflow:hidden;
}
.input {
   position:relative;
   width:100%;
   overflow:hidden;
   margin-bottom:10px;
}
.myinput{
   width:100%;
   position:relative;
   height:35px;
   font-size:14px;
   padding:10px;
   outline:none;
}
*{
   box-sizing:border-box;
   -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
}

.createnew{
   position:relative;
   float:right;
   margin-top:10px;
   font-size:14px;
   font-weight:600;
   background-color:red;
   color:#ffffff;
   padding:8px;
}

.error {
   border:1px solid red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <div class="inputs">
      <div class="input" id="surway_poll">
         <input type="text" class="myinput" id="hoho" placeholder="Write something!">
      </div>
   </div>
   <div class="createnew">Create New Input</div>
</div>

If you want to check that all inputs are non-blank (to cover the case where a user has cleared a non-blank input), then you can use this if instead:

     if ($('.myinput').get().every(s => $(s).val() !== '')) {

NB: See also how in the above snippet, the button is removed as soon as you have four inputs, not later when you click it.

Upvotes: 3

Dij
Dij

Reputation: 9808

In your original code you used $(".myinput").val().length which only takes first element's value. you need to check for all inputs before appending a new input, not just the first or the last one. This way even if the last input is not empty and some input above is empty, you still need to show the alert.

$(document).ready(function(){
   $("body").on("click",".createnew", function(){
     var inputs = $(".myinput");
     var emptyFields = false;
     for (var i=0; i<inputs.length; i++){
     if ($(inputs[i]).val().length === 0)
            emptyFields = true;
     }
 if (emptyFields) {
     alert("You can not leave it blank input field!");
  } else {
  if(inputs.length !== 4){
        $('.inputs').append("<div class='input' id='surway_poll'><input type='text' class='myinput' id='hoho' placeholder='Write something!'></div>");
    } else {
       $(".createnew").remove();
    }
}

   });
});
html,
body {
   width: 100%;
   height: 100%;
   padding: 0px;
   margin: 0px;
   font-family: helvetica, arial, sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
}
.container {
   position:relative;
   width:100%;
   max-width:500px;
   margin:0px auto;
   overflow:hidden;
   margin-top:100px;
}
.inputs {
   position:relative;
   width:100%;
   overflow:hidden;
}
.input {
   position:relative;
   width:100%;
   overflow:hidden;
   margin-bottom:10px;
}
.myinput{
   width:100%;
   position:relative;
   height:35px;
   font-size:14px;
   padding:10px;
   outline:none;
}
*{
   box-sizing:border-box;
   -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
}

.createnew{
   position:relative;
   float:right;
   margin-top:10px;
   font-size:14px;
   font-weight:600;
   background-color:red;
   color:#ffffff;
   padding:8px;
}

.error {
   border:1px solid red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <div class="inputs">
      <div class="input" id="surway_poll">
         <input type="text" class="myinput" id="hoho" placeholder="Write something!">
      </div>
   </div>
   <div class="createnew">Create New Input</div>
</div>

Upvotes: 2

Ahmed Mahmud
Ahmed Mahmud

Reputation: 281

When you select the $('.myinput') it will return an array and if you try and run .val() with the array it will only do it for the first element in the array, you will want to use the .each JQuery function

You could do something like:

function checkInputs(inputs) {
  $("input").each(function() {
    var element = $(this);
    if (element.val() == "") {
      return false
    }
  });
  return true
}

if (checkInputs($(".myinput"))) { 
      if($('.input').length !== 4){
        $(".inputs").append("<div class='input' id='surway_poll'><input type='text' class='myinput' id='hoho' placeholder='Write something!'></div>");
    } else {
       $(".createnew").remove();
    }
  } else {
     alert("You can not leave it blank input field!");
  }

Documentation: https://api.jquery.com/each/

Upvotes: 1

Related Questions